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

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

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

另请注意，匿名函数中的this是指匿名函数本身，因此要么将this分配给函数外部的某些内容（var self = this），要么使用arrow function如果使用ES6。

修改

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

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 }

有条件的v-if只是第一次使用？

1 个答案: