Как связать v-модель в компоненте VueJS - PullRequest
Новая
       18

Как связать v-модель в компоненте VueJS

0 голосов
/ 01 сентября 2018

Я новичок в Vue, поэтому я пытаюсь создать Input Date Picker, используя Vuetify.

Это мой код:

Codepen

Проблема в том, что когда я выбираю дату в средстве выбора, я получаю сообщение об ошибке в консоли:

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: '$value'

Это правильный способ создания этого компонента?

1 Ответ

0 голосов
/ 01 сентября 2018

Как гласит ошибка, вы не можете заменить опору у ребенка. Это потому, что Vue использует этот родительско-дочерний поток: enter image description here

С помощью этой структуры вы гарантируете, что данные родителя являются единственным источником правды. Для того, чтобы изменить данные, вы должны передать их родителю. Вы почти имели это в своем примере. Вместо генерации события change необходимо синхронизировать input для v-model, чтобы синхронизировать изменения.

Это становится более понятным, когда вы видите пример из документов : 

<input v-model="searchText">

Действительно так же, как: 

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

Однако, начиная с версии 2.3.0, вы можете вносить изменения в реквизит с помощью модификатора .sync 

Vue.component('date-picker', {
    props: ['label'],
    data: () => ({
        date: null,
        dateFormatted: null,
        open: false
    }),
    created() {
        this.date = this.$value;
    },
    methods: {
        formatDate (date) {
            if (!date) return null
            const [year, month, day] = date.split('-')
            return `${day}/${month}/${year}`
        },
        parseDate (date) {
            if (!date) return null
            const [day, month, year] = date.split('/')
            return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
        },
        update() {
            this.$emit('input', this.dateFormatted);
        }
    },
    watch: {
        date (val) {
            this.dateFormatted = this.formatDate(this.date)
        },
        dateFormatted(val) {
            this.update();
        }
    },
    template:`
        <v-menu
            ref="open"
            :close-on-content-click="false"
            v-model="open"
            :nudge-right="40"
            lazy
            transition="scale-transition"
            offset-y
            full-width
            >
            <v-text-field
                slot="activator"
                v-model="dateFormatted"
                :label="label"
                placeholder="dia/mês/ano"
                @blur="date = parseDate(dateFormatted)"
            ></v-text-field>
            <v-date-picker v-model="date" no-title @input="open = false"></v-date-picker>
        </v-menu>
    `
});

Vue.config.productionTip = false;
Vue.config.devtools=false

new Vue({
  el: '#app',
  data: () => ({
    myDate: '2018-09-01'
  })
});
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.1.4/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.2.0/vuetify.min.js"></script>


<div id="app">
  <v-app>
     <v-flex xs24>
       <date-picker label="Select a date" v-model="myDate"></date-picker>
       <br>
       Current date: {{myDate}}
    </v-flex>
  </v-app>
</div>
...