Question

我使用vue js和laravel。

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

但很少有人没有通过，显示为空（＆＃34;＆＃34;）。

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']
 });

OUPUT ：

 ID : 1
 LIST :

如果我点击Option＆＃34; Grid＆＃34;，

输出：

 ID: 1
 LIST : False

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

为什么我只获得ID的值？

还有其他解决方案吗？

Answer 1

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

查看此bin：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}
    }
})

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

1 个答案: