Как я могу создать пользовательский компонент, который может дать атрибут V-модели - PullRequest
Новая
       4

Как я могу создать пользовательский компонент, который может дать атрибут V-модели

0 голосов
/ 26 июня 2018

Я создал компонент vue (вход), который может менять направление в зависимости от первого символа.Выглядеть так: 

let smart_input = Vue.component('smart-input', {
    template: `<input :dir="direction" v-model="text">`,

    data() {
        return {
            text: ''
        }
    },

    computed: {
        direction(){
            let firstChar = this.text[0]
            return firstChar === undefined || firstChar.match(/[A-Za-z]/) !== null ? 'ltr' : 'rtl'
        }
    }
})

Я добавил этот компонент в свое корневое приложение Vue.

Поэтому я хочу добавить некоторые атрибуты в свой пользовательский компонент (например, v-model), ноэто не работает!

Выглядит так: 

<smart-input v-model='infomation'></smart-input>

Как я могу решить эту проблему?

1 Ответ

0 голосов
/ 26 июня 2018

Я не знаю, нужно ли вам это, но вот мой взгляд на v-модель для компонента 

const smart_input = Vue.component('smart-input', {
    template: `
    <div>
    <input :dir="direction"  ref="inputref" :value="value" v-on:input="UpdateParent">  
      <button @click="Changeinfo">Parent Change</button>
    </div>
    `,
    props:{value:null},
    computed: {
        direction(){
            let firstChar = this.value[0];
            return firstChar === undefined || firstChar.match(/[A-Za-z]/) !== null ? 'ltr' : 'rtl'
        }
    },
    methods:{
    UpdateParent:function(event){
        this.$emit('input', event.target.value)
    },
    Changeinfo:function(){
        this.$emit('input', 'changed')
    }
    }

})

new Vue({
  el: '#app',
  components:{smart_input},
  data(){
    return{
        infomation:"test"
    }
  },
  methods:{
        TestVmodel:function(){
        this.infomation = "parent";
    }
  }  
})

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

https://jsfiddle.net/50wL7mdz/407158/

...