首页 > 解决方案 > 如何获取 vue treeselect 值

问题描述

我在我的网站上实现了 Vue-Treeselect,一切都很好,我的记录有 treeselect。问题是 - 如何获得选定项目的价值?

我的实现:

头:

    <!-- include Vue 2.x -->
    <script src="https://cdn.jsdelivr.net/npm/vue@^2"></script>
    <!-- include vue-treeselect & its styles. you can change the version tag to better suit your need. -->
    <script src="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@0.0.29/dist/vue-treeselect.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@0.0.29/dist/vue-treeselect.min.css">

应用部分(内部表格):

                                         <div id="app">
                                          <treeselect v-model="value" :multiple="true" :options="options" placeholder="Wybierz region..."/>
                                         <input type="hidden" name="location" value="{{ value }}" />

                                         <div class="result">{{ value }}</div>

                                    </div>  

JS:

  <script>
// register the component
Vue.component('treeselect', VueTreeselect.Treeselect)

new Vue({
  el: '#app',
  data: {
    // define default value
    value: [],
    // define options
    options: [ 

                                                <?
                                                    $sql = mysql_query("select * from kody group by woj");
                                                    while($data=mysql_fetch_assoc($sql)){
                                                ?>
                                                { id: '<?echo $data['woj'];?>',
                                                  label: '<?echo $data['woj'];?>',
                                                  children: [ 

                                                        <?
                                                            $sql1 = mysql_query("select * from kody where woj like '".$data['woj']."' group by powiat");
                                                            while($data1=mysql_fetch_assoc($sql1)){
                                                                ?>
                                                                {
                                                                id: '<?echo $data['woj'];?>-<? echo $data1['powiat'];?>',
                                                                label: '<? echo $data1['powiat'];?>',                                                                       
                                                                },

                                                        <?
                                                            }
                                                        ?>

                                                    ]
                                                },

                                                <?
                                                    }
                                                ?>



    ],
  },
})

我的记录有treeselect,我可以选择它,但我不能用它来获取其他表单元素的请求。

标签: formsvue.js

解决方案


在你的:

<treeselect v-model="value" ... />

添加一个 name="..." 参数,如下所示:

<treeselect name="xyz" v-model="value" ... />

它将为该值创建一个隐藏的表单字段。

您可以在 props 部分下的文档中找到该属性:https ://vue-treeselect.js.org/


推荐阅读