使用突变vue修改数据

Question

你好，我正在为保存的食谱创建一个网站，但由于这是我第一次卡在如何修改用户输入的数据，我试图实现的是，当用户添加一个新的食谱与用户输入的数据卡被添加到主页，如果你点击卡上添加的数据应该在那里，但我创建的每个卡都有相同的数据，我怎么能有不同的卡与他们自己的每个不同的数据。到目前为止，我的代码如下:添加新食谱页面(newrecp.vue)

<template>
  <div class="container">
    <v-text-field
      class="mx-1 my-1"
      label=" food name"
        color="black"
        outlined 
        v-model="data . title"
    ></v-text-field> 
   
    <v-timeline :dense=" $vuetify . breakpoint . s m And   Down">
      <v-timeline-item
        color="purple lighten-2"
        fill-dot
        right
      >
        <v-card>
          <v-card-title class="purple lighten-2">
            <h2 class="display-1 white--text font-weight-light">Step 1</h2>
          </v-card-title>
          <v-container>
            <v-row>
              <v-col cols="12" md="10">
                <v-text area                   
                  auto-grow 
                  rows="4"
                  row-height="20"
                  shaped
                  v-model="data.one"
                ></v-text area>
              </v-col>
            </v-row>
          </v-container>
        </v-card>
      </v-timeline-item>

      <v-timeline-item
        color="amber lighten-1"
        fill-dot
        left
        small
      >
        <v-card>
          <v-card-title class="amber lighten-1 justify-end">
            <h2 class="display-1 mr-4 white--text font-weight-light">Step 2</h2>
          </v-card-title>
          <v-container>
            <v-row>
              <v-col cols="12" md="8">
                <v-text area
                  auto-grow
                  rows="4"
                  row-height="20"
                  shaped
                  v-model="data. two"
                ></v-text area> 
              </v-col>
            </v-row>
          </v-container>
        </v-card>
      </v-timeline-item>

      <v-timeline-item
        color="cyan lighten-1"
        fill-dot
        right
      >
        <v-card>
          <v-card-title class="cyan lighten-1">
            <h2 class="display-1 white--text font-weight-light">Step 3</h2>
          </v-card-title>
          <v-container>
            <v-row>
              <v-col >
                <v-text area
                  auto-grow
                  rows="4"
                  row-height="20"
                  shaped
                  v-model="data .three"
                ></v-text area>
              </v-col>
            </v-row>
          </v-container>
        </v-card>
      </v-timeline-item>

      <v-timeline-item
        color="red lighten-1"
        fill-dot
        left
        small
      >
        <v-card>
          <v-card-title class="red lighten-1 justify-end">
            <h2 class="display-1 mr-4 white--text font-weight-light">Step 4</h2>
          </v-card-title>
          <v-container>
            <v-row>
              <v-col cols="12" md="10">
                <v-text area
                  auto-grow
                  rows="4"
                  row-height="20"
                  shaped
                  v-model="data .four"
                ></v-text area>
              </v-col>
            </v-row>
          </v-container>
        </v-card>
      </v-timeline-item>
    </v-timeline>
    <v-layout row wrap>
      <v-flex mx-3 >
        <v-b t n block color="secondary" dark @click="addnew">Save</v-b t n>

      </v-flex>
    </v-layout>
  </div>
</template> 

<script>
export default {
  data (){
    return{
      data: {
        title:'',
        one: '',
        two: '',
        three: '',
        four: '',
      }
    },
   
       methods: {
   addnew(){
 let savedrecp = this.data
 this.$store.commit('newrecp', savedrecp)
 this.$router.push({ path:'/' }) 
}},
          
}
</script> 

保存的配方页面：

<template>
<div class="container">
 <v-app>
   
               <v-text-field
                   class="mx-1 my-1"
                       label=" food name"
                       color="black"
                       outlined 
                       v-model="data.title"
                   ></v-text-field> 
       
  <v-timeline :dense="$vuetify.breakpoint.smAndDown">
    <v-timeline-item
      color="purple lighten-2"
      fill-dot
      right
    >
      <v-card>
        <v-card-title class="purple lighten-2">
          <h2 class="display-1 white--text font-weight-light">Step 1</h2>
        </v-card-title>
        <v-container>
          <v-row>
            <v-col cols="12" md="10">
                 <v-textarea
          auto-grow
          rows="4"
          row-height="20"
          shaped
          color="purple"
     background-color="white"
          filled
          v-model="data.one"
        ></v-textarea>
            </v-col>
          </v-row>
        </v-container>
      </v-card>
    </v-timeline-item>

    <v-timeline-item
      color="amber lighten-1"
      fill-dot
      left
      small
    >
      <v-card>
        <v-card-title class="amber lighten-1 justify-end">
          <h2 class="display-1 mr-4 white--text font-weight-light">Step 2</h2>
        </v-card-title>
        <v-container>
          <v-row>
            <v-col cols="12" md="8">
                    <v-textarea
          auto-grow
          rows="4"
          row-height="20"
          shaped
            color="yellow"
     background-color="white"
          filled
          v-model="data.two"
        ></v-textarea>
            </v-col>
          </v-row>
        </v-container>
      </v-card>
    </v-timeline-item>

    <v-timeline-item
      color="cyan lighten-1"
      fill-dot
      right
    >
      <v-card>
        <v-card-title class="cyan lighten-1">
          <h2 class="display-1 white--text font-weight-light">Step 3</h2>
        </v-card-title>
        <v-container>
          <v-row>
            <v-col >
                    <v-textarea
          auto-grow
          rows="4"
          row-height="20"
          shaped
            color="blue"
     background-color="white"
          filled
          v-model="data.three"
        ></v-textarea>
            </v-col>
          </v-row>
        </v-container>
      </v-card>
    </v-timeline-item>

    <v-timeline-item
      color="red lighten-1"
      fill-dot
      left
      small
    >
      <v-card>
        <v-card-title class="red lighten-1 justify-end">
          <h2 class="display-1 mr-4 white--text font-weight-light">step4</h2>
        </v-card-title>
        <v-container>
          <v-row>
            <v-col cols="12" md="10">
                    <v-textarea
          auto-grow
          rows="4"
          row-height="20"
          shaped
            color="red"
     background-color="white"
          filled
          v-model="data.four"
        ></v-textarea>
            </v-col>
          </v-row>
        </v-container>
      </v-card>
    </v-timeline-item>

    
  </v-timeline>
  
 </v-app>
</div>
</template>
 


<script>
export default {
    data (){
         return{
           
           data: {
             
             title:'',
             
               one:'',
               two:'',
               three:'',
               four:''
             
          }
          
         
        
        }
    },
     computed: {
    item(){
      return this.$store.getters.data
    }},

          mounted() {
      this.title = this.$route.params.name
      this.data = this.item[0]
  },
    
}
</script>

Answer 1

我怎样才能拥有不同的卡片，每个卡片都有自己的不同数据

首先，将你的食谱放在一个数组中：

data(){
    return{
        recipes: [
            {
                title: "first recipe",
                description: "text....."
            },
            {
                title: "second recipe",
                description: "text....."
            },
            // and so on...
        ]
    }
}

然后使用v-for指令在模板上呈现此数据

<div class="cards">
    <v-card v-for="(recipe, index) in recipes" :key="index">
        <v-card-title class="red lighten-1 justify-end">
            <h2>{{ recipe.title }}</h2>
        </v-card-title>
        
        <div>
            {{ recipe.description }}
        </div>
    </v-card>
</div>

您需要了解es6阵列原型，如push、splice、shift、unshift...能够改变你的数据并进行相应的渲染。

例如

您可以使用以下命令添加新配方：

addRecipe(){
   this.recipes.push({ title: 'new one', description: '....'})
}

和删除

deleteRecipe(index){
   this.recipes.splice(index, 1)
}