有条件的v-if仅在第一次工作? [英] Conditional v-if is working only for the first time?

问题描述

我认为这是

<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. 问题是，当already_voted为true时，仅第一次显示该div，仅此而已.下次当其为真时，什么也没有发生.有什么建议吗?

Im getting value on click and if its true it need to show this div. Problem is that this div is showed only for first time when already_voted is true and thats it. Next time when its true nothing happend. Any suggestion?

推荐答案

看起来您正在混合jQuery和Vue，除非有特殊原因，否则应避免使用.相反，您应该将属性绑定到数据.作为您正在执行的操作的基本版本，您可以将Disabled属性和消息都绑定到voted标志:

It looks like you are mixing jQuery and Vue, which should be avoided unless you have a specific reason to do so. Instead you should bind attributes to data. As a basic version of what you are doing you could bind both the disabled attribute and the message to a voted flag:

标记

<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标志为true时显示一条消息.

Here I'm simply binding the disabled attribute using v-bind to the voted flag to disabled the buttons and am using v-if to show a message if the voted flag is true.

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

Here's the JSFiddle: https://jsfiddle.net/05sbjqLL/

还请注意，匿名函数内的this是指匿名函数本身，因此可以将this分配给函数外部的某些内容(var self = this)或使用

Also be aware that this inside an anonymous function refers to the anonymous function itself, so either assign this to something (var self = this) outside the function or use an arrow function if using ES6.

编辑

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

I've updated the JSFiddle to show you how you might handle your situation based on you comments:

https://jsfiddle.net/umkvps5g/

首先，我创建了一个directive，它允许您从Cookie初始化变量:

Firstly, I've created a directive that will allow you to initiate your variable from your 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，因此直到用户单击按钮，消息才会显示:

I simply disabled the button to show you how to bind attributes to data, there's loads more that can be done, for example showing the message after a user clicks the button, I've just added a click counter and bound thev-if to that instead, so the message doesn't show until a user clicks the button:

<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仅在第一次工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！