Question

我正在使用bulma vuejs datepicker，但我无法获得该值。它不断返回null。 This is the datepicker我使用。

我的<date-picker>组件：

<template>
  <datepicker placeholder="European Format ('d-m-Y')" :config="{ dateFormat: 'd-m-Y', static: true }"></datepicker>
</template>

<script>
import Datepicker from 'vue-bulma-datepicker'

export default {
  components: {
    Datepicker
  }
}
</script>

这是我使用axios调用的vue实例：

Vue.component('date-picker', require('./components/Datepicker.vue'));
const app = new Vue({
    el: '#app',

    data: {
        releaseDate: '',
        file: '',
    },

    methods: {
        createGame (e) {
            self = this;
            this.loading = true;
            const fileInput = document.querySelector('#image-upload');
            const formData = new FormData();
            formData.append('image', fileInput.files[0]);
            formData.append('image', this.file);
            formData.append('releaseDate', this.releaseDate);
            axios.post('/games', formData)
            .then((response) => {
                console.log(response.data);
            })
            .catch((error) => {
                console.log(error);
            })
        },

    }
});

<date-picker></date-picker>

Answer 1

尝试向您的<date-picker>组件添加道具。两个步骤：

将:value="value" @input="$emit('input', $event)"属性添加到模板中的<datepicker>;
将props: ['value'],添加到JavaScript。

结果如下所示：

<template>
  <datepicker :value="value" @input="$emit('input', $event)" placeholder="European Format ('d-m-Y')" :config="{ dateFormat: 'd-m-Y', static: true }"></datepicker>
</template>

<script>
import Datepicker from 'vue-bulma-datepicker'

export default {
  props: ['value'],
  components: {
    Datepicker
  }
}
</script>

现在，在父中，将releaseDate作为v-model的<{>} <date-picker> 传递：

<date-picker v-model="releaseDate"></date-picker>

传递为v-model将：

将releaseDate的值发送到<date-picker>的名为value的内部道具;和
@input="$emit('input', $event)"发出的事件<date-picker>将更新releaseDate。

有关详细信息，请参阅Components - Form Input Components using Custom Events。

此时，在日期选择器中选择日期后，当您拨打父组件的createGame()时，this.releaseDate将具有所选日期的值。

Vuejs Bulma Datepicker获得价值

1 个答案: