如何将 html 按钮转换为本机脚本？

Question

这是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>

Answer 1

请再看一下 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) {
      //
    }
  },
});

如何将 html 按钮转换为本机脚本？

How to convert a html button into native script?

vue.js

nativescript

native