передача данных между компонентами в vuejs

Question

У меня есть приложение для отслеживания расходов.У меня проблема с добавлением расходов.У меня есть два компонента, ответственных за это: addCategory.vue и selectCategory.vue.

Это мой компонент selectCategory.vue:

<template>
<div>
    <select class="custom-select" @selected="this.$emit('select-cat',category)">
        <option v-for="category in categories">{{ category.title }}</option>
    </select>
</div>
</template>

<script>
import axios from 'axios';

export default {
    data() {
        return {
            categories: [],
            errors: []

        }
    },
    created() {
        axios.get(`http://localhost:3000/categories`)
        .then(response => {
            this.categories = response.data;
            console.log(response.data);
        })
        .catch(e => {
            this.errors.push(e)
        })
    }
}

</script>

, а это мой компонент addExpense.vue:

<template>
<div class="card">

        <div class="card-header">
        <h4>Dodaj nowy wydatek</h4>
        </div>
        <form v-on:submit.prevent="addExpense">
        <div class="card-body">
            <div class="form-group">
                <label for="expense-name">Nazwa wydatku</label>
                <input type="text" class="form-control" id="expense-name" v-model="Expense.title">
            </div>
            <div class="form-group">
                <label for="expense-amount">Wartość</label>
                <input type="number" class="form-control" id="expense-amount" v-model="Expense.amount">
            </div>
            <div class="form-group">
                <label for="expense-date">Data wydatku</label>
                <input type="date" class="form-control" id="expense-date" v-model="Expense.date">
            </div>

             <div class="form-group">
                <label for="expense-category">Kategoria</label>
                    <select-category @select-cat="chooseCategory" v-model="Category.id"></select-category>
            </div>

                <br>
            <div class="form-group">
             <button class="btn btn-primary" @click="showAlert">Dodaj nowy wydatek</button>
            </div> 
          </div>
      </form>
        </div>
    </div> 
</template>

<script>
import axios from 'axios';
import selectCategory from './selectCategory.vue';

export default {
    components: {
        'select-category': selectCategory
    },
    data(){
        return {
            Expense: {
                title:'',
                amount: '',
                date:'',
                categoryId:''
            },

        }

    },

    methods : {
        chooseCategory(){
            this.Expense.categoryId = this.Category.id
        },
        showAlert(){
            this.$alert.success({
                message: 'Wydatek dodany poprawnie'
            })
        },
        addExpense(){
            let newExpense = {
                title : this.Expense.title,
                amount : this.Expense.amount,
                date : this.Expense.date,
                categoryId: this.Expense.categoryId
            }
            console.log(newExpense);
            axios.post(`http://localhost:3000/expenses`, newExpense)
                .then((response) => {
                console.log(response);
            })
            .catch((error) => {
                console.log(error);
            })
        }
    }
}

</script>

Мне нужна помощь, потому что, когда я пытаюсь добавить Расход, поле с «categoryId» остается пустым.Я использую События, чтобы передать имя категории, но я не знаю, как добавить category.id в Расход.

Answer 1

Проблемы в ваших кодах:

1. вам нужно добавить одно свойство данных, чтобы сохранить выбранную пользователем опцию, поэтому добавьте одно свойство данных = selectedCategory

2. вы не привязали значение для опций выбора и не связали значение выбора, поэтому добавьте v-model="selectedCategory" для <select> и добавьте :value="category" для <option>

3. Похоже, вы связали неправильное событие (событие = выбрано более вероятно, что вы настроили имя события) для <select>, измените на @change="selectChange(selectedCategory)"

Наконец, в addExpense.vue событие прослушивания = select-cat.

Как показано ниже:

Vue.config.productionTip = false
Vue.component('select-category', {

  template: `<div>
                <select class="custom-select" v-model="selectedCategory" @change="selectChange(selectedCategory)">
                    <option v-for="category in categories" :value="category">{{ category.title }}</option>
                </select>
            </div>`,
    data() {
        return {
            categories: [],
            errors: [],
            selectedCategory: null
        }
    },
    mounted() {
        this.categories = [
          {'id':1, 'title': 'abc'},
          {'id':2, 'title': 'xyz'}
        ]
    },
    methods: {
      selectChange: function(newCatetory) {
        this.$emit('select-cat',newCatetory)
      }
    }
})

new Vue({
  el: '#app',
  data() {
    return {
      categorySelected: null
    }
  },
  watch: {
    categorySelected: function (newVal, oldVal) {
      console.log('changed to ' + newVal.id + ' from ' + (oldVal ? oldVal.id : oldVal))
    }
  },
  methods:{
    chooseCategory: function(data) {
      this.categorySelected = data
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
   <div class="form-group">
      <label for="expense-category">Kategoria</label>
      <select-category @select-cat="chooseCategory($event)"></select-category>
  </div>
</div>