Vue: Директива динамической v-модели

Можете ли вы привести пример того, для чего это было бы полезно?

Скажем, представьте, что мы создаем клон phpmyadmin, который получает данные из оператора DESCRIBE TABLE и строит форму редактора строк из этих данных. Выражения привязки в этом случае будут по своей сути динамическими, так как имена полей мы узнаем только после выполнения 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]" .

мы можем ? Ух ты !

Эван, можешь ли ты поставить скрипт js, показывающий пример задачи?

@ yyx990803 , это здорово, но это был всего лишь пример, показывающий только один пример динамического использования. В бизнес-приложении логика может быть более сложной.

Чтобы быть ясным, я против того, чтобы разрешать интерполяцию внутри выражений директив. Прямо сейчас усы означают, что ожидаемый результат будет строкой и будет использоваться как строка (для вставки в DOM или для поиска идентификатора). Преобразование усов в выражения, которые затем могут быть оценены, делает его двумя уровнями абстракции и может в конечном итоге сделать ваши шаблоны очень запутанными.

я думаю, было бы очень полезно добавить возможность интерполировать строку перед вычислением выражения

метод 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'>

или, возможно, функция получения / установки, которую можно передать.

отказ от ответственности: я не читал спецификацию 2.0, поэтому вы, возможно, обратились к этому там.

@bhoriuchi, почему нет вычисляемого свойства?

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

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

А для v-model вы можете использовать вычисляемое свойство с сеттером.

@simplesmiler Я не пробовал вычислять свойства в двусторонней привязке, я

Обновлять

@simplesmiler - поэтому проблема, с которой я сталкиваюсь с использованием вычисляемого свойства, заключается в том, что у меня нет способа передать аргументы вычисляемому свойству. this внутри геттера или даже value в get(value) оба указывают на компонент.

немного предыстории моего использования.

Я создаю конструктор форм, который использует объект json для создания форм. объект конфигурации представляет собой более или менее двумерный массив объектов (строк / форм). Каждый объект конфигурации формы имеет поле модели, в котором есть строка пути к полю, которое должно быть установлено. чтобы использовать вычисляемое свойство для этого, мне нужно было бы иметь возможность определить из компонента, используя привязку компонента, какой индекс строки / формы, чтобы найти путь к модели из объекта конфигурации

в настоящее время у меня это работает с использованием предварительно инициализированного двухмерного массива с именем formData которому я привязываю каждую модель формы с помощью v-model="formData[rowIndex][formIndex]" и я наблюдаю за этим объектом на предмет изменений и обновляю родительский объект данных, но я мне не нравится этот подход, потому что он требует от меня предварительной инициализации массива для динамического добавления поля.

мне нужно 2 уровня вложенности, потому что я использую этот компонент построителя форм на другом компоненте, которому нужно установить объект, который выглядит примерно так

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

где моя строка пути будет выглядеть как

templates.operatingSystems[<dynamic uuid>]

Обновление 2

я перешел с использования многомерного массива на простой объект с именами ключей

"<rowIndex>_<formIndex>"

и использовал глубокие часы, чтобы синхронизировать данные с родителем. Я по-прежнему считаю, что межпланетная привязка была бы полезной.

+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') в директиве

Я пересмотрел это и нашел более простое решение. Вы можете создать собственный объект и добавить к нему геттеры / сеттеры при создании с использованием строки пути к модели. Вот простой пример

список ввода

<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, но я считаю, что все, что создано с помощью vue.set, можно наблюдать, поэтому вы можете добавить код для просмотра динамических свойств и генерирования событий при изменениях, или вы можете проследить за целевым объектом. У кого-то может быть лучшее предложение

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

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' } }
        };
    }
});

Вот ссылка на

Привет всем здесь. Я использую VUE.js с Laravel. У меня есть поля динамической настраиваемой формы, поступающие из базы данных. Я подписался на @ yyx990803 . v-model = "форма ['имя']". Полевые работы. Но проблема в том, что я не могу получить значения полей в контроллере 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-модели»:

Когда я реализую компонент Vue, как я могу динамически управлять модификатором v-модели - .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", но это не работает с сеттерами и геттерами, возможно, это сработало бы, если бы это было просто вычисленное значение.

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-модель, чтобы она подошла к ней.

<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>

У меня есть клон HMTL, использующий (часть для ввода формы), который я вставляю с помощью jquery. (не говорите, почему я использую jquery). теперь мой элемент вставляется jquery. так можно ли привязать v-модель.

$('.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>

Итак, как я могу привязать v-модель к области 2 и 3.

@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