Vue: 동적 v-model 지시문

어떤 점에 도움이 되는지 예를 들어주실 수 있습니까?

DESCRIBE TABLE 문에서 데이터를 수신하고 해당 데이터에서 행 편집기 양식을 작성하는 phpmyadmin의 복제본을 빌드한다고 가정해 보겠습니다. 이 경우 바인딩 표현식은 본질적으로 동적입니다. SQL DESCRIBE TABLE을 실행한 후에만 필드 이름을 알 수 있기 때문입니다.

+1, 나도 이것을 찾고 있습니다

+1, 이것을 볼 수 있기를 바랍니다.

나는 이것이 현재 구문이 달성할 수 없는 것을 가능하게 하는 것을 여전히 완전히 이해하지 못합니다. 일부 코드 샘플?

위에서 설명한 phpmyadmin 복제와 관련된 일부 의사 코드:

    <script>
    modue.exports = {
        data: function(){
            //returns table structure pulled from the backend somehow
            return {fields: [
                {name: "id", type: "integer"},
                {name: "name", type: "varchar"},
                {name: "gender", type: "varchar"}
            ], 
            // this was initialised based on the structure above, does not matter how.
            form: {id: null, name: null, gender: null}); 
        },
       methods: {
          getBindingExpr: function(field){ /* blah-blah */ }
       }

    }
    </script>
    <template>
       <div v-repeat="field: fields">
          <!-- Here we need to display an editor bound to the field -->
           <input type="text" v-model="form.{{field.name}}">
        <!-- Or, we can call a function that calculates the binding expression --
          <input type="text" v-model="{{getBindingExpr(field)}}">
      </div>
    </template>

v-model="form[field.name]" 이미 할 수 있습니다.

우리는 할 수 있습니까? 우와 !

evan todo-ish 예제를 보여주는 js 바이올린을 올려 줄 수 있습니까?

@yyx990803 , 훌륭하지만 동적 사용의 한 예를 보여주는 예일 뿐입니다. 논리는 일종의 비즈니스 응용 프로그램에서 더 복잡할 수 있습니다.

분명히 나는 ​​지시어 표현식 내에서 보간을 허용하는 아이디어에 반대합니다. 현재 콧수염은 평가된 결과가 문자열로 예상되고 문자열로 사용됨을 의미합니다(DOM에 삽입하거나 ID 조회를 수행함). 콧수염을 평가할 수 있는 표현식으로 평가하면 두 개의 추상화 계층이 만들어지고 결국 템플릿을 매우 혼란스럽게 만들 수 있습니다.

표현식을 평가하기 전에 문자열을 보간하는 기능을 추가하는 것이 매우 가치 있다고 생각합니다.

data[pathString] 메서드는 중첩 수준이 1인 개체에 대해 잘 작동하지만 2 이상의 경우 동적으로 바인딩하는 방법을 찾지 못했습니다.

콧수염보다 더 명확하도록 바인딩에 수정자를 추가할 수 있습니다.

예시

let myData = {}
let varPath = 'myData.path.to["my"].obj'
let modelPath = 'myData.path.to["my"].model'

<component-name :myparam.interpolate='varPath'></component-name>
<input v-model.interpolate='modelPath'>

또는 전달할 수 있는 getter/setter 함수일 수 있습니다.

면책 조항: 나는 2.0 사양을 읽지 않았으므로 여기에서 이 문제를 해결했을 수 있습니다.

@bhoriuchi 왜 계산 속성이 없습니까?

computed: {
  varPath: function() {
    return this.myData.path.to['my'].obj;
  },
},

<component-name :myparam="varPath"></component-name>

그리고 v-model 경우 setter와 함께 계산된 속성을 사용할 수 있습니다.

@simplesmiler 양방향 바인딩에서 계산된 속성을 시도하지 않았습니다. 팁 고마워.

업데이트

@simplesmiler - 계산된 속성을 사용할 때 발생하는 문제는 계산된 속성에 인수를 전달할 방법이 없다는 것입니다. getter 내부의 this 또는 value 의 get(value) 둘 다 구성 요소를 가리킵니다.

내 사용 사례에 대한 몇 가지 배경.

json 객체를 사용하여 양식을 작성하는 양식 작성기를 만들고 있습니다. 구성 개체는 개체(행/양식)의 2차원 배열입니다. 각 양식 구성 개체에는 설정해야 하는 필드에 대한 경로 문자열이 있는 모델 필드가 있습니다. 이에 대해 계산된 속성을 사용하려면 구성 개체에서 모델 경로를 조회하기 위해 구성 요소 바인딩을 사용하여 구성 요소에서 어떤 행/양식 색인을 결정할 수 있어야 합니다.

현재 formData 라는 미리 초기화된 2차원 배열을 사용하여 이 작업을 수행하고 있습니다. 이 배열은 각 양식 모델을 v-model="formData[rowIndex][formIndex]" 바인딩하고 해당 개체에서 변경 사항을 확인하고 상위 데이터 개체를 업데이트하지만 저는 동적 필드 추가를 위해 배열을 미리 초기화해야 하기 때문에 이 접근 방식을 싫어합니다.

다음과 같은 개체를 설정해야 하는 다른 구성 요소에서 이 양식 작성기 구성 요소를 사용하고 있기 때문에 2단계의 중첩이 필요합니다.

data: {
  templates: {
    operatingSystems: {
      <someuuid1>: [ <osid1>, <osid2> ],
      <someuuid2>: [ <osid5>, <osid10>, <osid22> ]
   }
  }
}

내 경로 문자열은 다음과 같습니다.

templates.operatingSystems[<dynamic uuid>]

업데이트 2

다차원 배열을 사용하는 것에서 키 이름이 있는 일반 객체로 변경했습니다.

"<rowIndex>_<formIndex>"

데이터를 부모와 동기화된 상태로 유지하기 위해 딥 워치를 사용했습니다. 나는 여전히 interoplated 바인드가 유익할 것이라고 생각합니다.

+1

저에게는 v-model="$data[field.name]" 이 트릭을 수행합니다!

@victorwpbastos 이것은 field.name을 키로 사용하기 때문에 깊이 중첩된 객체를 설정하는 데 작동하지 않습니다.

예를 들어 다음 데이터와 필드 문자열이 있는 경우

$data = {
  'animal': {
    'dog': {
      'husky': 1
    }
  }
}
field.name = 'animal.dog.husky'

그리고 당신은 사용

v-model="$data[field.name]"

양식에 값 2를 입력하면 데이터가 다음과 같이 표시됩니다.

$data = {
  'animal': {
    'dog': {
      'husky': 1
    }
  },
 'animal.dog.husky': 2
}

보간된 바인드가 유용한 이유는 부모 경로(예: 'animal.dog')를 지시문에 "하드 코딩"할 수 없는 동적 중첩 입력을 구축하는 경우입니다.

나는 이것을 다시 방문하여 더 간단한 해결책을 찾았습니다. 사용자 정의 개체를 만들고 모델 경로 문자열을 사용하여 생성된 개체에 getter/setter를 추가할 수 있습니다. 다음은 간단한 예입니다.

입력 목록

<template lang="jade">
  div
    div(v-for="form in config.forms")
      input(v-model="formData[form.model]")
</template>

<script type="text/babel">
  import Vue from 'vue'
  import _ from 'lodash'

  export default {
    props: ['value', 'config'],
    computed: {},
    methods: {
      vueSet (obj, path, val) {
        let value = obj
        let fields = _.isArray(path) ? path : _.toPath(path)
        for (let f in fields) {
          let idx = Number(f)
          let p = fields[idx]
          if (idx === fields.length - 1) Vue.set(value, p, val)
          else if (!value[p]) Vue.set(value, p, _.isNumber(p) ? [] : {})
          value = value[p]
        }
      }
    },
    data () {
      return {
        formData: {}
      }
    },
    created () {
      _.forEach(this.config.forms, (form) => {
        Object.defineProperty(this.formData, form.model, {
          get: () => _.get(this.value, form.model),
          set: (v) => this.vueSet(this.value, form.model, v)
        })
      })
    }
  }
</script>

사용

<template lang="jade">
  div
    input-list(v-model="formData", :config='formConfig')
</template>

<script type="text/babel">
  import InputList from './InputList'
  export default {
    components: {
      InputList
    },
    data () {
      return {
        formData: {
          name: 'Jon',
          loc: {
            id: 1
          }
        },
        formConfig: {
          forms: [
            { type: 'input', model: 'loc.id' },
            { type: 'input', model: 'loc["name"]' }
          ]
        }
      }
    }
  }
</script>

이 방법을 사용하는 경우 동적으로 생성된 각 반응 데이터에 대해 감시자를 설정할 수 있는 방법은 무엇입니까?

@luqmanrom 저는 vue watcher의 내부 작동에 익숙하지 않지만 vue.set으로 생성된 모든 것을 볼 수 있으므로 동적 소품을 관찰하고 변경 사항에 대해 균일한 값을 내보내는 코드를 추가하거나 대상 개체를 감시할 수 있다고 믿습니다. 다른 사람이 더 나은 제안을 할 수 있습니다.

이를 위해 툴킷을 작성했습니다. 또한 v-model을 사용하여 vuex를 변경할 수 있습니다.

https://github.com/bhoriuchi/vue-deepset

이것은 트릭을 수행해야합니다.

지령

Vue.directive('deep-model', {
    bind(el, binding, vnode) {
        el.addEventListener('input', e => {
            new Function('obj', 'v', `obj.${binding.value} = v`)(vnode.context.$data, e.target.value);
        });
    },
    unbind(el) {
        el.removeEventListener('input');
    },
    inserted(el, binding, vnode) {
        el.value = new Function('obj', `return obj.${binding.value}`)(vnode.context.$data);
    },
    update(el, binding, vnode) {
        el.value = new Function('obj', `return obj.${binding.value}`)(vnode.context.$data);
    }
});

사용법(구성요소)

const component = Vue.extend({
    template: `<input v-deep-model="'one.two.three'">`,
    data() {
        return {
            one: { two: { three: 'foo' } }
        };
    }
});

여기 요점 참조가 있습니다.

안녕하세요 여기있는 어떤 몸. Laravel과 함께 VUE.js를 사용하고 있습니다. 데이터베이스에서 가져온 동적 사용자 정의 양식 필드가 있습니다. @yyx990803을 팔로우했습니다 . v-모델="양식['이름']". 필드가 작동합니다. 그러나 문제는 laravel 컨트롤러에서 필드 값을 가져올 수 없다는 것입니다. 여기 있는 사람 @tylerOtwell Form.js 클래스를 사용하고 있습니다.
당신의 도움은 크게 감사하겠습니다.
감사 해요

이것은 도움말 포럼이 아닙니다. https://forum.vuejs.org에 질문에 답하기 위한 전용 서비스가

v-model 값을 찾기 위해 호출되는 함수를 사용하는 데 정말 어려움을 겪었습니다. 여기 예가 있습니다.

다음과 같은 날짜 범위 선택기를 만들려고 합니다.

여기서 사전 설정은 다음과 같은 배열에서 가져옵니다.

presets = [
  {
    label: 'Today',
    range: [moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
  },
]

이제 data 구성 요소에 해당 입력 필드에 대한 두 개의 날짜가 있습니다. startDate & endDate .

내가 정말로 하고 싶은 것은 사용자가 선택한 날짜와 사전 설정 구성에서 전달된 날짜를 비교하고 v-model 값을 true 또는 false 왜냐하면...

• v-model 는 조건을 수락하지 않으므로 preset.range[0] === startDate && preset.range[1] === endDate 할 수 없습니다.
• v-model 는 v-for 별칭이 함수에 전달되는 것을 허용하지 않습니다. 그래서 나는 다음과 같은 것을 할 수 없다.

<li v-model="isActive(index)" v-for="(preset, index) in presets">
...
</li>

최소한 조건문을 허용하면 이 문제를 쉽게 해결할 수 있습니다.

또한 근본적으로 잘못된 작업을 수행할 수 있으므로 다른 방법으로 달성할 수 있는지 지적해 주십시오.

현재 저는 계산된 속성이 함수 호출이라는 사실을 이용하여 문제를 해결했습니다.

스크립트

computed: {
  isActive() {
      return this.presets.map(
        preset =>
          preset.range[0] === this.startDate && preset.range[1] === this.endDate
      );
    }
}

주형

<li v-model="isActive[index]" v-for="(preset, index) in presets">
...
</li>

그러나 그것은 정말로 나에게 해킹처럼 보입니다. 확실하지 않다. 제안하십시오.

여기에 설명된 대로 이것이 Vuex와 함께 작동하는지 아는 사람이 있습니까? https://vuex.vuejs.org/guide/forms.html

약간 동적인 입력 필드를 갖고 싶습니다.

<input v-model="dataHandler" :scope="foo" type="checkbox" />

다음 코드 내에서 dom 요소의 "범위"에 어떻게 액세스할 수 있습니까?

computed: {
  message: {
    get () {
      //
    },
    set (value) {
      //
    }
  }
}

@vielhuber가 ref 를 사용하려고 합니까?

<input ref="myInput" v-model="dataHandler" :scope="foo" type="checkbox" />

this.$refs.myInput.getAttribute('scope') // => 'foo'

안녕하세요, 이 주제와 관련된 Vue 질문이 있습니다 - "동적 v-model 지시문":

Vue 구성 요소를 구현할 때 v-model modifier - .lazy 등을 어떻게 동적으로 제어할 수 있습니까?
예를 들어:

<el-input v-model[field.lazy ? '.lazy' : '']="model[field.key]">

이것은 나를 위해 작동합니다.

<input v-model="$data[field].key" type="text">

@fritx 수정자를 "동적으로" 변경하기 위해 다음과 같이 v-if 디렉터를 사용했습니다.

<input v-if="field.lazy" v-model.lazy="model[field.key]">
<input v-else v-model="model[field.key]">

수정자의 다양한 조합을 원하는 경우 번거로울 수 있습니다.

한 가지 옵션은 모든 if 문을 포함하는 재사용 가능한 구성 요소를 만들고 렌더링하려는 입력 구성 요소와 원하는 수정자가 있는 입력을 결정하는 수정자 배열을 전달하는 것입니다. 위와 같은 if 문을 사용하는 것만으로도 충분했습니다.

v-model 지시문에서 계산된 속성에 동적으로 액세스하는 방법을 찾을 수 없습니다.
다음을 사용하여 데이터 속성에 액세스할 수 있으므로 내 계산된 속성에 액세스할 수 있는 방법이 없습니다.
v-model="$data[무언가]"

내 코드는 다음과 같습니다.

computed: { get () { // }, set (value) { // } } }

찾을 수 없는 문자열로 계산된 속성에 액세스하는 방법이 필요합니다.
이것은 예이지만 다른 솔루션도 작동합니다.
<input v-model="$computed[someDynamicString]">
아니면 그냥
<input v-model="[someDynamicString]">

내가 찾은 가장 가까운 것은 "_computedWatchers[someDynamicString].value"이지만 setter 및 getter에서는 작동하지 않습니다. 아마도 계산된 값이면 작동할 것입니다.

v-model="dialogTemp.tmBasFuelEntities[dialogTemp.tmBasFuelEntities.findIndex(t=>t.paramCode==item.paramCode)].paramValue"

이것은 내 dialogTemp입니다.

dialogTemp: {
  tmBasFuelEntities: [
    {
      paramCode: '',
      paramValue: ''
    },
    {
      paramCode: '',
      paramValue: ''
    },
    {
      paramCode: '',
      paramValue: ''
    },
  ]
}

@fritx 수정자를 "동적으로" 변경하기 위해 다음과 같이 v-if 디렉터를 사용했습니다.

<input v-if="field.lazy" v-model.lazy="model[field.key]">
<input v-else v-model="model[field.key]">

수정자의 다양한 조합을 원하는 경우 번거로울 수 있습니다.

한 가지 옵션은 모든 if 문을 포함하는 재사용 가능한 구성 요소를 만들고 렌더링하려는 입력 구성 요소와 원하는 수정자가 있는 입력을 결정하는 수정자 배열을 전달하는 것입니다. 위와 같은 if 문을 사용하는 것만으로도 충분했습니다.

멋지긴 하지만 너무 장황한 바로 그 하나에 많은 소품을 전달해야 했습니다. @danhanson

<template v-else-if="itemCom">
        <component v-if="getFieldType(field) === 'number'"
          :is="itemCom"
          :model="model"
          :field="field"
          :schema="schema"
          v-model.number="model[field.key]"
          v-loading="field.loading"
          v-bind="getFieldAttrs(field)"
          v-on="field.listen"
          @form-emit="handleFormEmit"
        ></component>
        <component v-else
          :is="itemCom"
          :model="model"
          :field="field"
          :schema="schema"
          v-model="model[field.key]"
          v-loading="field.loading"
          v-bind="getFieldAttrs(field)"
          v-on="field.listen"
          @form-emit="handleFormEmit"
        ></component>

@fritx v-model 를 :value / @input 하고 수동으로 구문 분석할 수 있습니다.

</template>
        <component v-if="getFieldType(field) === 'number'"
          :is="itemCom"
          :model="model"
          :field="field"
          :schema="schema"
          :value="parseField(field, model[field.key])"
          @input="model[field.key] = parseField(field, $event.target.value)"
          v-loading="field.loading"
          v-bind="getFieldAttrs(field)"
          v-on="field.listen"
          @form-emit="handleFormEmit"
        ></component>
<template>
<script>

export default {
    ...
    methods: {
        parseField (field, val) {
            if (this.getFieldType(field) === 'number') {
                return Number(val);
            }
            return val;
        }
    }
};
</script>

@danhanson 멋져요

@danhanson 죄송합니다.

:value="getFieldValue(field, model[field.key])"
@input="model[field.key] = getFieldValue(field, $event)"
@change="model[field.key] = getFieldValue(field, $event)"

잘 모르겠습니다. 시도해 보겠습니다. 감사 해요!

@ninojovic

여기에서 해결책을 찾았습니다. https://forum.vuejs.org/t/accessing-computed-properties-from-template-dynamically/4798/9

<input v-model="_self[someDynamicString]">
나를 위해 작동

이 같은

<el-input
  v-if="!nestedField.widget"
  v-model="form[nestedField.id]"
  placeholder=""
  v-bind="nestedField.rest"
>

[
  {
    label: '收房价格',
    id: 'housePrice',
    type: Number,
    widget: 'div',
    fieldSet: [
      {
        label: '',
        id: 'housePrice',
        type: Number,
        defaultValue: 0,
        rest: {
          style: 'width:5em;'
        },
      },
      {
        label: '',
        id: 'priceUnit',
        type: String,
        widget: 'select',
        defaultValue: '元/月',
        options: [
          { label: '元/月', value: '元/月' },
          { label: '元/年', value: '元/年' },
          { label: ' 元/天·m2', value: '元/天·m2' },
        ],
        rest: {
          style: 'width:6em;'
        },
      },
    ],
  },
]

필드 유형이 Number 이면 훨씬 더 편리한 v-model.number 를 사용하고 싶습니다. @fritx

나는 그것에 맞게 v-model을 분해합니다.

<el-input
  v-if="!nestedField.widget"
  :value="form[nestedField.id]"
  @input="v => { form[nestedField.id] = isNumber(nestedField.type) ? Number(v) : v }"
  placeholder=""
  v-bind="nestedField.rest"
>
  <template v-if="nestedField.suffixText" slot="append">{{nestedField.suffixText}}</template>
</el-input>

jquery를 사용하여 삽입하는 (양식 입력의 일부)를 사용하여 HMTL을 복제했습니다. (내가 왜 jquery를 사용하는지 말하지 마십시오). 이제 내 요소가 jquery에 의해 삽입되고 있습니다. 그래서 v-model을 바인딩할 수 있습니다.

$('.area').append('formPart')
in form i have some inputs like
<div class="form-group">
<input type="text" name="area2" /> 
<input type="text" name="area3" />
</div>

그래서 영역 2와 3에서 v-model을 어떻게 바인딩할 수 있습니까?

@ninojovic

여기에서 해결책을 찾았습니다. https://forum.vuejs.org/t/accessing-computed-properties-from-template-dynamically/4798/9

<input v-model="_self[someDynamicString]">
나를 위해 작동

저에게도 효과가 있지만 "_self" 변수는 Vue의 내부 속성을 위해 예약되어 있습니다(#2098 참조).

즉, 이 구현은 미래에 중단될 수 있습니다.

나는 이 방법을 선호한다:

<template>
  <input v-model="mySelf[someDynamicString]">
</template>

<script>
export default {
  data() {
    return {
      mySelf: this
    }
  }
}
</script>

자세한 내용은 https://stackoverflow.com/questions/52104176/use-of-self-attribute-from-vue-vm-is-reliable을 참조하십시오.