Vuejs реактивный компонент v-if

Question

Я изо всех сил пытаюсь понять, как сделать свой компонент реактивным. В настоящий момент кнопка отображается правильно, но как только происходит событие create/delete, шаблон не изменяется. Любые советы по обновлению компонента после события?

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

EDIT: Нашел возможно ошибка в коде

Вот еще одна проблема в вашем 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?