为什么不使用Vue JS在HTML中动态传递所有值？

Question

我在laravel中使用vue js。

我传递了多个变量给vuejs组件（模板），我可以成功传递几个变量。

但是其中有几个未通过，显示Empty（“”）。

HTML （模板）：

 <template v-if="showTemplate" id="segment_body">
    <div class="col-md-2" align="center">
      <b>Grid</b><br>
      <a href=javascript:void(0) @click="t_showList=false"><i class=""></i>Grid</a> |
      <a href=javascript:void(0) @click="t_showList=true"><i class=""></i>List</a>
    </div>
    <b>ID : @{{ t_id }}</b><br>
    <b>LIST : @{{ t_showList }}</b>
</template>

HTML （数据源）：

<script> var a = { list: false} </script>

 <div>
    <campaign_segment :t_id=1 :t_showList="a.list"></campaign_segment>
 </div>

VueJS ：

Vue.component('campaign_segment', {
      template: '#segment_body',
      props: ['t_showList','t_id']
 });

输出 ：

 ID : 1
 LIST : 

如果我单击“网格”选项，

输出 ：

 ID: 1
 LIST : False

为什么我没有得到list的价值？

为什么我只获得ID的值？

还有其他解决方案吗？

Answer 1

您正在遇到此问题，因为您正在尝试将javascript对象直接传递给组件，而不是将其通过Vue实例传递。

检出这个垃圾箱： http : //jsbin.com/fosifo/edit?html,js,output

bin中唯一真正的区别是，与其尝试将a直接传递给组件（在b / c中不起作用，vue实例不知道数据），不如：

<script> var a = { list: false} </script>

<div>
    <campaign_segment :t_id=1 :t_showList="a.list"></campaign_segment>
</div>

我们通过vue实例传递它：

在您的html中：

<script>
    var a = {list: false}
</script>

在您的JavaScript中：

new Vue({
    el: '#app',
    data:{
        a: a // the `a` value here is referencing that same `var a = {list: false}` in your markup.
    }
})

通过做这种方式，因为在创建VUE实例是能结合它的a数据属性全局定义变量a从您的标记。

基本上与执行此操作相同：

new Vue({
    el: '#app',
    data:{
        a: {list: false}
    }
})