Question

我有一个需要更新Vue.component数据的指令。我该如何设定价值？这是我的代码：

Vue.directive('loggedin', function(value) {
    console.log('loggedin = ' + value);
    vm.$set('loggedIn', value);
});

vm。$ set（＆＃39; loggedIn＆＃39;，value）不起作用。我收到以下错误：未捕获的TypeError：无法读取属性＆＃39; $ set＆＃39;未定义的

var ck = Vue.component('checkout', {
    template: '#checkout-template',

    props: ['list'],

    data: function() {
        return {
            loggedIn: '',
            billingAddr: [],
            shippingAddr: [],

        }
    },
});

传递的价值是真实的＆＃39;或者＆＃39; false＆＃39;。

修改

我需要将<div v-loggedin="true"></div>绑定到组件中的数据值，并将其设置为＆＃39; true＆＃39;。我不需要双向绑定。

也许我以错误的方式解决这个问题。基本上，我从服务器获取登录的值，并且需要在组件的数据中将我的loggedIn值设置为true或false。

Answer 1

我不确定你是如何使用你的指令的，所以我只是做一个假设。如果我错了，请纠正我。

看一下twoWay property（你可能需要使用对象语法）：

Vue.directive('loggedin', {
  twoWay: true, // Setup the two way binding
  bind: function () {
  },
  update: function (newValue) {
    console.log('loggedin = ' + value);
    this.set(newValue); // Set the new value for the instance here
  },
  unbind: function () {
  }
});

然后你可以使用这样的指令（loggedIn是你想要写的属性，并且它也作为初始值）：

<yourelement v-loggedin="loggedIn">...</yourelement>

关于您的修改

由于您只想将数据从服务器传递到组件，因此您只需使用props就可以了：

var ck = Vue.component('checkout', {
    template: '#checkout-template',

    props: ['list', 'loggedIn'],

    data: function() {
        return {
            billingAddr: [],
            shippingAddr: [],

        }
    },
});

然后在使用您的组件时，传递它：

<checkout :loggedIn="true">
    ...
</checkout>

Answer 2

我决定走另一条路。必须有一种更简单的方法来做到这一点。所以，这就是我所做的。

我正在检查用户是否通过“创建”＆＃39;来执行ajax请求来登录。在虚拟机上运行。然后我使用true或false更新vm中的auth变量。

var vm = new Vue({
    el: 'body',
    data: {
        auth: false,

    },

    methods: {
        getData: function() {

            this.$http.get('{!! url('api/check-for-auth') !!}').then(function(response) { 
                this.auth = response.data;
            }.bind(this));
        },
    },

    created: function() {
        this.getData();
    },
});

在组件中我创建了一个名为＆＃39; auth＆＃39;的道具项目。并将其绑定到虚拟机上的auth数据。

var ck = Vue.component('checkout', {
    template: '#checkout-template',
    props: ['list', 'auth'],
    data: function() {
        return {
            user: [],
            billingAddr: [],
            shippingAddr: [],

        }
    },

});

我的组件

<checkout :list.sync="cartItems" :auth.sync="auth"></checkout>

感谢大家的帮助。

从Vue.directive

2 个答案: