Question

我正在尝试使用动态选择输入来填充它的选项元素，具体取决于ajax的响应和以下代码。如果数据是硬编码的，那么一切都运行良好，但是当我尝试根据响应制作选项动态时我没有反应。

总之，让我们说我有一个对象 {Foo：＆＃39; Bar＆＃39; Lorem：＆＃39; Ipsum＆＃39;} 我得到了

<select>
  <option value="Foo">Bar</option>
  <option value="Lorem">Ipsum</option>
</select>

我的问题是当我想使用下面的函数使数据动态化时，即使我现在有 {Enet：＆＃39; Dolor＆＃39;，麦格纳：＆＃39; Aliqua＆＃39;，mollit：＆＃39; Anim＆＃39;} 有更好的方法吗？或者我错过了什么。

负责填充对象的函数：

$.get('/registrar/levels', function (data) {
   for (const datum of data) {
     addModal.levelFields[datum.name] = datum.id;
   }
});

组件：

Vue.component("modal-add-form", {
props: {
    formName: String,
    formType: [String, Number],
    options: Object,
},
template: `<div class="form-group" v-if="formType !== 'select'">
                <label :for="formName" v-text="formName"></label>
                <input :type="formType" class="form-control" :name="formName" :id="formName" value="" :placeholder="formName">
            </div>

            <div v-else>
                <select :name="formName" class="form-control">
                    <option v-for="(value, name) in options" :value="value" v-text="name"></option>
                </select>
            </div>`

});

Answer 1

您不应直接重新分配数据值，因为Vue无法检测属性添加和重新呈现视图。您应该通过describe('YourComponent test', () => { let component beforeEach(() => { component = mount(<YourComponent />) }) it('should render valid mode', () => { component.setProps({ isValid: true }) expect(component).toMatchSnapshot() }) it('should render invalid mode', () => { component.setProps({ isValid: false }) expect(component).toMatchSnapshot() }) })或Vue.set这样执行此操作：

this.$set

Vuejs传递数据以从ajax请求中选择元素而不是被动

1 个答案: