Vue: v-model이 동적 구성 요소에서 작동하지 않음

Vue: v-model이 동적 구성 요소에서 작동하지 않음

예를 들어 다음과 같습니다.<component v-model='foo' :is='boo' ...>.

foo의 값은 입력 중 그대로 유지됩니다.

저는 그 문제를 꽤 오랫동안 해결하려고 노력하고 있어요.나는 많은 질문과 실마리를 확인했지만 도움이 되는 것은 하나도 없었다.

HTML이 작동하지 않음:

            <component
                :is="field.component"
                :key="key"
                :name="field.name"
                v-for="(field, key) in integration_data"
                v-model="field.value"
            >
            </component>

HTML은 정상적으로 동작합니다.

            <input
                :key="key"
                :name="field.name"
                v-for="(field, key) in integration_data"
                v-model="field.value"
            >

Vue 컨트롤러:

export default {
init: function (init_data) {

    return new Vue({
        data: {
            integration_data: [
              {name: 'field_name0', component: 'input', value: ''},
              {name: 'field_name0', component: 'input', value: ''},
            ]
        },
    });
}
}

사용할 수 없습니다.input기본 입력 요소가 될 것으로 예상합니다. :is는 컴포넌트에 이름을 붙여야 합니다(필요한 경우 입력을 포함할 수 있습니다).

다음으로 컴포넌트에서의 동작을 이해할 필요가 있습니다.

컴포넌트가 동작하기 위해서는v-model, 다음과 같이 할 필요가 있습니다(이것들은 2.2.0+ 로 설정할 수 있습니다).

• 을 받아들이다value받침대
• 을 방출하다.input새로운 가치를 가진 사건

이 모든 것을 종합하면v-model와 함께:is.

new Vue({
  el: '#app',
  data: {
    integration_data: [{
      name: 'one',
      component: 'one',
      value: 'ok'
    }]
  },
  components: {
    one: {
      props: ['name', 'value'],
      template: '<div>{{name}} and <input v-model="proxyValue"><slot></slot></div>',
      computed: {
        proxyValue: {
          get() { return this.value; },
          set(newValue) { this.$emit('input', newValue); }
        }
      }
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
  <component 
    :is="field.component" 
    v-for="(field, key) in integration_data" 
    :key="key" 
    :name="field.name" 
    v-model="field.value"
  >
    <div>{{field.value}}</div>
  </component>
</div>

v-model당신이 하려는 일과는 아무 상관이 없어요컴포넌트를 동적으로 삽입하려고 하는 것 같습니다.바로 그거야:is컴포넌트에 데이터를 전달하려면props.

예를 들어 다음과 같습니다.

Vue 인스턴스:

const vm = new Vue({
  el: '#app',
  data: {
    exampleValue: 'This value will be passed to the example component'
  }
})

구성 요소 등록:

Vue.component('example-component', {
  // declare the props
  props: ['value'],
  template: '<span>{{ value}}</span>'
})

그런 다음 다음과 같이 사용합니다.

<example-component :value="exampleValue"></example-component>

또는 다음 중 하나를 선택합니다.

<component :is="'example-component'" :value="exampleValue"></component>

언급URL : https://stackoverflow.com/questions/44851978/vue-v-model-doesnt-work-with-dynamic-components