vue新手，如下代码为什么数据值没有双向绑定？

5037120243

发布于
2019-09-16

如题，希望选择复选框及输入框输入字符时，能实时显示勾选值及输入框值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="wrap">
        <create-search-terms :searchfn="search" :config="checkBoxConfig" v-model="searchText"></create-search-terms>
        <div id="show">
            勾选值：{{checkBoxConfig.checked}},输入框值：{{searchText}}
        </div>
    </div>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let createSearchTerms = {
            props: ['searchfn', 'config', 'search'],
            template: `
    <section id="search">
      <div class="search-up clearfix ft-14 color-ff">
         <template v-for="item in config">
            <input type="checkbox" v-model="item.checked" :id="item.id" :value="item.value"><label :for="item.id">{{item.text}}</label>
         </template>
      </div>
      <div class="search-content clearfix">
         <input class="left" type="text" name="searchText" id="searchText" placeholder="请输入要检索的内容" v-model="search">
         <span class="left ft-18 color-ff bgc-70" @click="searchfn">检索</span>
      </div>
  </section>
   `
        }
        Vue.component('create-search-terms', createSearchTerms);

        let base_vm = new Vue({
            el: '#wrap',
            data: {
                checkBoxConfig: [{
                    id: 'flow',
                    value: 1,
                    text: '花',
                    checked: ''
                }, {
                    id: 'picture',
                    value: 2,
                    text: '画',
                    checked: ''
                }, {
                    id: 'build',
                    value: 3,
                    text: '建筑',
                    checked: ''
                }, {
                    id: 'view',
                    value: 4,
                    text: '景色',
                    checked: ''
                }, {
                    id: 'images',
                    value: 5,
                    text: '图片',
                    checked: ''
                }, {
                    id: 'others',
                    value: 6,
                    text: '其他',
                    checked: ''
                }],
                searchText: '',
            },
            methods: {
                search() {
                    !$('input[name="searchText"]').val().trim() ? alert('请输入要搜索的内容') : this.searchAjax();
                    // 阻止冒泡
                    return false;
                },
                searchAjax() {
                    let type = '';
                    this.checkBoxConfig.forEach((item, index) => {
                        if (item.checked) {
                            !type ? type = item.value : type += ',' + item.value;
                        }
                    });
                }
            },

        });
    </script>
</body>

</html>

javascript

阅读 2.7k

2 个回答

liuxliang

✓ 已被采纳

你代码里有几处错误

组件传值参数不对
组件穿过来的值直接使用，也就是报的错
还有个错误就是要在组件里用到watch才能实现你说的双向绑定，我在修改的代码里也没有添加，这个你自己加吧

我只是修改了你的前两个错误，然后显示了初始值，让你知道你错在哪里

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="wrap">
        <create-search-terms :searchfn="search" :config="checkBoxConfig" :search="searchText"></create-search-terms>
        <div id="show">
            勾选值：{{checkBoxConfig.filter(res=>res.checked)}},输入框值：{{searchText}}
        </div>
    </div>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let createSearchTerms = {
            props: ['searchfn', 'config', 'search'],
            data(){
            return{
            searchText:"",
            checkconfig:""
            }
            },
            template: `
    <section id="search">
      <div class="search-up clearfix ft-14 color-ff">
         <template v-for="item in checkconfig">
            <input type="checkbox" v-model="item.checked" :id="item.id" :value="item.value"><label :for="item.id">{{item.text}}</label>
         </template>
      </div>
      <div class="search-content clearfix">
         <input class="left" type="text" name="searchText" id="searchText" placeholder="请输入要检索的内容" v-model="searchText">
         <span class="left ft-18 color-ff bgc-70" @click="searchfn">检索</span>
      </div>
  </section>
   `,
   mounted(){
   // 赋值给一个新变量
   this.searchText=this.search;
   this.checkconfig=this.config;
   }
        }
        Vue.component('create-search-terms', createSearchTerms);

        let base_vm = new Vue({
            el: '#wrap',
            data: {
                checkBoxConfig: [{
                    id: 'flow',
                    value: 1,
                    text: '花',
                    checked: true
                }, {
                    id: 'picture',
                    value: 2,
                    text: '画',
                    checked: ''
                }, {
                    id: 'build',
                    value: 3,
                    text: '建筑',
                    checked: ''
                }, {
                    id: 'view',
                    value: 4,
                    text: '景色',
                    checked: ''
                }, {
                    id: 'images',
                    value: 5,
                    text: '图片',
                    checked: ''
                }, {
                    id: 'others',
                    value: 6,
                    text: '其他',
                    checked: ''
                }],
                searchText: 'aaa',
            },
            methods: {
                search() {
                    !$('input[name="searchText"]').val().trim() ? alert('请输入要搜索的内容') : this.searchAjax();
                    // 阻止冒泡
                    return false;
                },
                searchAjax() {
                    let type = '';
                    this.checkBoxConfig.forEach((item, index) => {
                        if (item.checked) {
                            !type ? type = item.value : type += ',' + item.value;
                        }
                    });
                }
            },

        });
    </script>
</body>

</html>

Ignace

625

发布于
2019-09-16

use a data or computed property based on the prop's value. Prop being mutated: "search"  这种时候看报错信息就好了.

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

vue新手，如下代码为什么数据值没有双向绑定？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

怎么获取动态弹出对话框的模拟单击？

git提交记录问题？

为什么在 JavaScript 中直接调用和用逻辑与调用方法结果不同？

什么是闭包？闭包有哪些应用场景？