vue форма e.target.name.value не определена - PullRequest
Новая
       12

vue форма e.target.name.value не определена

0 голосов
/ 09 апреля 2020

Мои значения в моей форме vue js являются пустыми или неопределенными, когда я отправляю их по какой-либо причине. Я пытаюсь зарегистрировать e.target.name.value в консоли, чтобы проверить значения моей формы.

Есть ли более простой способ сделать это в vue для этой настройки? Я пробовал разные методы и боюсь, что я пытаюсь гомогенизировать мою ваниль js с vue и создаю больше проблем для себя.

мои vue данные: 

 new Vue({
            el: '#grocery_list',
            data: {
              selected: null,
              list: [
                {
                  id: 0,
                  category: 'Baked goods',
                  food: ['bread','cookie','butter','powder']
                },
                {
                  id: 1,
                  category: 'meats',
                  food: ['chicken','turkey','beef']
                },
                {
                  id: 2,
                  category: 'fruits',
                  food: ['bannana','apple','pineapple']
                },
                {
                  id: 3,
                  category: 'canned goods',
                  food: ['tomatoes','green beans','corn']
                },
                {
                  id: 4,
                  category: 'veggies',
                  food: ['broccoli','celery','lettuce']
                },
                {
                  id: 5,
                  category: 'pantry',
                  food: ['broom','mop','dried beans']
                },
              ],
              isHidden: true, 
              form: {},
            },

            methods:{

              addItem: function(e){
                console.log(form)
              },

              viewItemsinCat: function(){
                this.isHidden = false
              },

              checkItem: function(){

              }

            }
   })

мой html

    <div class="addItem" id="addItem" @submit.prevent="addItem">
          <form>
              <label for="addItem">Add food item</label>
              <input v-model="form.foodName" type="text" name="foodName"></input>
              <div>
                  <select v-model="form.category" id="food">
                          <option v-for="item in list" name="item">{{item.category}}</option>
                  </select>
              </div>
              <div>
                  <button type="submit">Add Item</button>
              </div>
          </form>
      </div>

1 Ответ

1 голос
/ 09 апреля 2020

В vuejs вам не нужно использовать имена или идентификаторы для получения значения ввода, все, что у вас есть, это использовать v-model, который является реактивным и мгновенно обновит все значения формы

проверить это 

<template>
    <div class="addItem" id="addItem" @submit.prevent="addItem">
        <form>
            <label for="addItem">Add food item</label>
            <input v-model="form.foodName" type="text" name="foodName"></input>
            <div>
                <select v-model="form.category" id="food">
                        <option v-for="item in list" name="item">{{item.category}}</option>
                </select>
            </div>
            <div>
                <button type="submit">Add Item</button>
            </div>
        </form>
    </div>
</template>

<script>
export default {
    data: () => ({
        form: {}
    }),
    methods: {
        addItem: function(){
            console.log(this.form)
        }
    }
}
</script>
...