时间戳

首页 > 解决方案 > 在 vuejs 中的组件之间传递数据

javascript - 在 vuejs 中的组件之间传递数据

问题描述

我有我的费用跟踪器应用程序。我在添加费用时遇到问题。我有两个组件负责：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 添加到费用中。

标签： javascriptvue.jsaxios

解决方案

您的代码中的问题：

  1. 您需要添加一个数据属性来保存用户选择的选项，因此添加一个数据属性= selectedCategory

  2. 你没有绑定select的options的值，也没有绑定select的值，所以add v-model="selectedCategory"for<select>和add :value="category"for<option>

  3. 看来您绑定了错误的事件（event= selected更可能是您自定义的事件名称）<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>

推荐阅读