Click here to Skip to main content
15,036,363 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
hello iam creating a website for saved recipes but since this is my first time iam stuck on how to modify user input data, what iam trying to achieve is when a user adds a new recipe a card with the data input by the user be added to the home page and if you created on the added card it will take you to the card with the datas input in


What I have tried:

here are my codes:
newrecp page:
<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=" saved recipe">Save</v-b t n>

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

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

  mounted() {
    console.log(this. data);
  },
}
</script>


homepage:
<template>
  <div class="home">
    <v-container grid-list-xs>
      <v-btn bottom fixed to="/new" > Click to add new Recipes
        <v-icon>fas fa-home</v-icon>
      </v-btn>

      <v-layout row wrap>
         <v-flex xs12 x13 lg12 v-for="(item, index) in data" :key="index">
           <v-card 
 
           >

           <v-list-item three-line>
             <v-list-item-content>
                <div class="overline mb-4">Recipe </div>
                <h1>{{item.title}}</h1>
                <v-list-item-title class="headline mb-1">pizza</v-list-item-title>
                <v-list-item-subtitle >Greyhound divisely hello coldly fonwderfully</v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>

            <v-card-actions>
              <v-btn  class="button3" text>remove</v-btn>
              <v-btn class="button1" text :to="'/savedrecp/'+item.title">open</v-btn>
            </v-card-actions>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>

<script>
Posted
Comments
Gerry Schmitz 9-Oct-20 19:50pm
   
You're "adding"; now give users the ability to read / browse recipes; then, you can start thing about modifying data.
Member 14960412 10-Oct-20 4:08am
   
Thank you for replying but i want my website to be just for people to be able to save their own recipes at
Richard MacCutchan 10-Oct-20 4:27am
   
Then you will need to save them in a database along with the user's credentials so you can serve them back at a later time.
Member 14960412 10-Oct-20 9:02am
   
So i cant do it by using mutation and getters?
Richard MacCutchan 10-Oct-20 10:58am
   
Not sure what that means.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900