Как конвертировать кнопку html в собственный скрипт? - PullRequest
Новая
       25

Как конвертировать кнопку html в собственный скрипт?

0 голосов
/ 17 марта 2020

Это код html, эта кнопка используется для фильтрации продуктов по имени: поэтому имя продукта должно отображаться в виде кнопки, чтобы пользователи могли отфильтровать параметр. 

<button id="filterme" v-for="f in filterFood" 
@click="$chooseFilter(f)">Filter food by {{f}}</button>

Это код скрипта: 

const app = new Vue({
el: "#app",
data: {
thisFood: [], //food array
newFood: {
  name: "",
  price: "",
  cuisine: ""
},

filterFood: ["null", "pizza", "chips", "rice", "chocolate", "salad"]

 methods() {
if (localStorage.getItem("thisFood")) {
   try {
     this.thisFood= JSON.parse(localStorage.getItem("thisFood"));
   } catch (e) {
   localStorage.removeItem("newFood");
 }

   this.thisFood.push(this.newFood); //add new food
   this.newFood= {
   name: "",             
    price: "",             
    cuisine: "",          

  }


 }
},

chooseFilter(filter) {
  this.filter = filter;
},

Я пытался использовать кнопку, она не работает. 

<button text:"filterme" for =" f in filterFood" @tap="chooseFilter(f)"> 
Filter food by {{f}} </button>

1 Ответ

0 голосов
/ 17 марта 2020

Пожалуйста, взгляните еще раз на документацию Vue: https://vuejs.org/v2/guide/components.html

Возможно, вы не передаете весь свой код, но структура еще далеко. Ваша methods функция (которая должна быть объектом) находится внутри вашего data объекта.

Кроме того, вам не хватает скобок.

Начните с правильной структуры и синтаксиса: 

const app = new Vue({
  el: "#app",

  data: {
    thisFood: [], //food array
    newFood: {
      name: "",
      price: "",
      cuisine: "",
    },

    filterFood: ["null", "pizza", "chips", "rice", "chocolate", "salad"]
  },

  methods: {
    chooseFilter(filter) {
      //
    }
  },
});
...