How to convert a html button into native script?

This is the html code, this button is used to filter food by name: So the name of the food should be displayed as a button so that users can filter the option.

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

This is the script code:

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;
},

I tried using a button it's not working.

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

Solution

Please take another look at the Vue documentation: https://v2.vuejs.org/v2/guide/components.html

Maybe you're not sharing all your code, but the structure is way off. Your methods function (which should be an object) is inside your data object.

Besides that you're missing parentheses .

Start with a valid structure and syntax:

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

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

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

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