Question

更新：几乎就在那里。将模板添加到HTML。在按钮上添加了v-if和v-else（无法让它在模板上工作）。硬编码下面的例子。试图找出最终的数组对象路径 - 由于某种原因v-if="this.id == favourites.listings_id"没有工作。

我正在使用vue.js构建收藏夹功能。创建和删除请求都可以正常工作。最后要求的是，要么使用适当的操作模板创建或删除显示类favourited或notFavourited，具体取决于用户是否喜欢该对象。用户收藏夹数组传递给收藏夹组件 - 我一直试图以这种方式处理它。

我已经在下面的js代码中评论了我想要实现的目标。

HTML

<div id="app">

<listings>
</listings>

</div>

<template id="listing-template">
  <div class="container">
    <div v-for="listing in listings" class="panel panel-default">
      <div class="panel-body">
        <div>@{{ listing.id }}</div>

        <favourite :id="listing.id"></favourite>

      </div>

    </div>
  </div>
</template>


<template id="favourite-template">
  <form><input class="hidden" type="input" name="_method" value="@{{ id }}" v-model="form.listings_id"></input><button v-if="this.id == 2" class="not-favourited" @click.prevent="create(favourite)" :disabled="form.busy"><i class="fa fa-heart" aria-hidden="true"></i><button v-else class="favourited" @click.prevent="delete(favourite)" :disabled="form.busy"><i class="fa fa-heart" aria-hidden="true"></i></button></form>
</template>

VUE.JS

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

Vue.component('favourite', {
  props: ['id'],

  data: function() {
    return {
        form: new SparkForm({
            listings_id: ''
        }),
        favourited: {
          color: 'red',
          fontSize: '12px'
        },
        notFavourited: {
          color: 'black',
          fontSize: '12px'
        },
        favourites: [], listings: [],
    };
  },

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

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

    // if favourite exists in favourites array
    // then give class favourited and call template delete
    // else give class notFavourited and call template create

    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: [],
        };
    },

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

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

在最喜欢的阵营中的示例对象

4: Object
created_at: "2016-07-22 21:14:40"
id: 81
listings_id: 1
updated_at: "2016-07-22 21:14:40"
user_id: 3

如何使用Vue.js在数组中切换类和模板？

0 个答案: