javascript - 为什么所有值都不能使用 Vue JS 在 Html 中动态传递？

Question

我将 vue js 与 laravel 结合使用。

我传递了多个变量抛出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

为什么我没有得到列表的值？

为什么我只得到ID的值？

还有其他解决方案吗？

Answer 1

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

查看此垃圾箱:http://jsbin.com/fosifo/edit?html,js,output

bin 中唯一真正的区别是，这里不是尝试直接将 a 传递给组件(这不起作用，因为 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 数据属性绑定(bind)到标记中的全局定义变量 a。

本质上与执行此操作相同:

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