thực hiện mô hình v thông qua chức năng hiển thị không phản ứng

Question

Tôi đang cố tạo thành phần đầu vào động sẽ có thể hoán đổi cho nhau giữa thẻ đầu vào và thẻ văn bản. Tôi đang cố gắng thực hiện điều này bằng cách sử dụng hàm render. (https://vuejs.org/v2/guide/render-function.html#v-model). Vấn đề tôi có là mô hình v chỉ hoạt động theo một cách, nếu tôi thay đổi thuộc tính dữ liệu trực tiếp, nó cập nhật giá trị văn bản, nhưng nếu tôi thay đổi hoặc nhập dữ liệu mới vào vùng văn bản, nó sẽ không cập nhật thuộc tính dữ liệu. Có ai biết làm thế nào để làm cho nó làm việc cả hai cách? Dưới đây là liên kết mã của tôi cho mã bút là dưới nó minh họa các vấn đề:

const tag = Vue.component('dynamic-tag', { 
    name: 'dynamic-tag', 
    render(createElement) { 
     return createElement(
      this.tag, 
      { 
       domProps: { 
        value: this.value 
       }, 
       on: { 
        input: event => { 
         this.value = event.target.value 
        } 
       } 
      }, 
      this.$slots.default 
     ) 
    }, 
    props: { 
     tag: { 
      type: String, 
      required: true 
     } 
    } 
}) 

const app = new Vue({ 
    el: '#app', 
    data: { 
    message: '' 
    }, 
    components: {tag} 
}) 

http://codepen.io/asolopovas/pen/OpWVxa?editors=1011

Answer 1

Bạn cần phải $emit thay đổi từ đầu vào của bạn.

on: { 
    input: event => { 
     this.value = event.target.value 
     this.$emit('input', event.target.value) 
    } 
} 

Answer 2

Vấn đề là bạn đang sử dụng v-mô hình với một thành phần tùy chỉnh. Khi sử dụng với thành phần v-model="message" chỉ là cú pháp đường cho

v-bind:value="message" 
v-on:input="value => { message = value }" 

Vì vậy, để sử dụng v-mô hình với các thành phần tùy chỉnh, thành phần của bạn phải có value prop và phát ra sự kiện đầu vào với giá trị đã thay đổi.

tôi sẽ để lại giải thích thêm cho documentation