Vuejs反应性v-if模板组件

Question

我正在努力了解如何使我的组件被动反应。目前按钮正确呈现但是一旦创建/删除事件发生，模板就不会改变。有关如何在事件发生后更新组件的任何提示？

new Vue({
  el: '#app'
});


Vue.component('favourite-button', {
  props: ['id', 'favourites'],
  template: '<input class="hidden" type="input" name="_method" value="{{ id }}" v-model="form.listings_id"></input><button v-if="isFavourite == true" class="favourited" @click="delete(favourite)" :disabled="form.busy"><i class="fa fa-heart" aria-hidden="true"></i><button class="not-favourited" v-else @click="create(favourite)" :disabled="form.busy"><i class="fa fa-heart" aria-hidden="true"></i></button><pre>{{ isFavourite == true }}</pre>',

  data: function() {
    return {
        form: new SparkForm({
            listings_id: ''
        }),
    };

  },


  created() {
      this.getFavourites();

  },

  computed: {
      isFavourite: function() {

        for (var i = 0; this.favourites.length; i++)
          {
            if (this.favourites[i].listings_id == this.id) {
            return true;

          }
        }
      },

    },

  methods: {

    getFavourites() {
        this.$http.get('/api/favourites')
          .then(response => {
            this.favourites = response.data;
          });
        },

    create() {
        Spark.post('/api/favourite', this.form)
            .then(favourite => {
            this.favourite.push(favourite);
            this.form.id = '';

            });


        },

        delete(favourite) {
            this.$http.delete('/api/favourite/' + this.id);
            this.form.id = '';

        }
      }

    });

Vue.component('listings',  {
    template: '#listing-template',

    data: function() {
      return {
            listings: [], favourites: [],
        };
    },

    created() {
        this.getListings();
    },

    methods: {
      getListings() {
          this.$http.get('/api/listings')
            .then(response => {
              this.listings = response.data;
          });
        }
      }
});

Answer 1

Vue希望HTML模板标记完美无缺。否则你会遇到多个问题。

我刚检查了您的模板并发现了问题 - 第一个<button>元素未关闭。

以下是您的代码的更新版本：

Vue.component('favourite-button', {
    props: ['id', 'favourites'],
    template: `
        <input class="hidden" type="input" name="_method" value="{{ id }}" v-model="form.listings_id"></input>
        <button v-if="isFavourite == true" class="favourited" @click="delete(favourite)" :disabled="form.busy">
            <i class="fa fa-heart" aria-hidden="true"></i>

        </button> <!-- This is missing in your version -->

        <button class="not-favourited" v-else @click="create(favourite)" :disabled="form.busy">
            <i class="fa fa-heart" aria-hidden="true"></i>
        </button>
        <pre>{{ isFavourite == true }}</pre>
    `,
    ...

请注意上面第7行的评论，模板中不存在结束</button>标记。

作为旁注，如果您不想在每行的末尾键入反斜杠以生成多行模板字符串，则可以使用反向标记，如上面的代码示例所示。这将帮助您避免导致Vue组件问题的标记错误以及数小时的调试。

另一个参考：在此页面中查看“多行字符串”：https://developers.google.com/web/updates/2015/01/ES6-Template-Strings

相关行（从上页复制）：

反引号语法中的任何空格也将被视为字符串的一部分。

console.log(`string text line 1
string text line 2`);

编辑：发现代码中可能存在错误

以下是create组件的favourite-button方法中的另一个问题：

methods: {
    // ...
    create() {
        Spark.post('/api/favourite', this.form)
            .then(favourite => {
                this.favourite.push(favourite);  // Note: This is the problem area
                this.form.id = '';
            });
    },
    //...
}

您的成功处理程序是指this.favourite.push(...)。您的组件的this.favourite或data中没有props。不应该是this.favourites？