条件 v-if 仅第一次起作用？

Question

我认为这是：

<div class="already_voted" v-if="already_voted" >
    <p>You already voted or your are not allowed to vote</p>
  </div>

这是我的方法：

 upvote: function(com_id) {

              var comment_id = {
                comment_id :com_id
              }
              this.$http.post('/blog/article/comment/upvote', comment_id).then(function(response){
                upvote_total= response.data.upvote_value;
                  this.already_voted = response.data.already_voted;
                  this.$dispatch('child-msg', this.already_voted);
                $('.upvote_class_' + com_id ).text(upvote_total);
                $('.isDisabledUpvote_' + com_id).addClass('disabled');
                 $('.isDisabledDownvote_' + com_id).removeClass('disabled');
              },function(response){

              });

          },

我在点击时获得了价值，如果它是真的，它需要显示这个 div。 问题是这个 div 仅在 already_voted 为真时才第一次显示，仅此而已。下次当它真的什么都没发生时。有什么建议吗？

Answer 1

您似乎在混合使用 jQuery 和 Vue，除非您有特定的理由，否则应避免这样做。相反，您应该将属性绑定到数据。作为您所做工作的基本版本，您可以将 disabled 属性和消息绑定到 voted 标志：

标记

<div id="app">
  <div v-if="voted">
    You have already voted!
  </div>
  <button v-bind:disabled="voted" @click="vote()">
  Vote
  </button>
    <button v-bind:disabled="!voted" @click="removeVote()">
  Un-Vote
  </button>
</div>

查看模型

new Vue({
  el: '#app',
  methods: {
    vote(){
      this.voted = true;
    },
    removeVote(){
      this.voted = false;
    }
  },
  data: {
    voted: false
  }
});

在这里，我只是使用v-bind 将disabled 属性绑定到voted 标志以禁用按钮，并使用v-if 在voted 标志为真时显示消息。

这是 JSFiddle：https://jsfiddle.net/05sbjqLL/

还要注意，匿名函数内部的this 指的是匿名函数本身，因此要么将this 分配给函数外部的某个东西(var self = this)，要么使用arrow function，如果使用ES6。

编辑

我已经更新了 JSFiddle 以向您展示如何根据您的 cmets 处理您的情况：

https://jsfiddle.net/umkvps5g/

首先，我创建了一个 directive，它允许您从 cookie 启动变量：

Vue.directive('init', {
  bind: function(el, binding, vnode) {
    vnode.context[binding.arg] = binding.value;
  }
})

现在可以用作：

<div v-init:voted="{{ $request->cookie('voted') }}"></div>

我只是 disabled 按钮向您展示如何将属性绑定到数据，还有更多可以做的事情，例如在用户单击按钮后显示消息，我刚刚添加了一个点击计数器并绑定v-if 改为那个，所以在用户单击按钮之前不会显示消息：

<div v-if="vote_attempts">
  You have already voted!
</div>

然后在vote()方法中：

vote() {
    this.voted = true;
    this.vote_attempts++;
  },

然后是数据：

  data: {
    voted: false,
    vote_attempts: 0
  }