<div v-for="(item,index) in dataall" :key="index" > <el-form-item :label="dataall[index].name" :prop="dataall[index].id"> <el-input v-model="formdata." type="textarea"></el-input> </el-form-item> </div>中的v-model="formdata." 中的formdata参数是新增的不是写死的要怎么动态添加
时间: 2023-10-23 07:14:20 浏览: 42
要动态添加`formdata`中的属性,可以使用Vue.set方法。例如,假设需要动态添加一个名为`newProperty`的属性,可以这样写:
```
Vue.set(formdata, 'newProperty', '');
```
这样就可以在`formdata`对象中动态添加一个名为`newProperty`的属性,并且将其初始值设置为空字符串。然后在模板中,就可以使用`v-model`指令来绑定这个新添加的属性了:
```
<el-input v-model="formdata.newProperty" type="textarea"></el-input>
```
这样就可以实现在循环中动态添加表单项,并且实现表单数据的双向绑定了。
相关问题
在这个组件里 <el-dialog :visible.sync="showQueueDesc"> <el-form-item label="<span style='color:black'>提示:可右键点击下方队列名直接跳转</span>"></el-form-item> <el-select v-model="serverIp" placeholder="请选择机器ip(必填)" filterable allow-create clearable style="width: 220px; margin: 10px"> <el-option v-for="item in serverIpList" :key="item.value" :label="'server ip: ' + item.desc" :value="item.value"> </el-option> </el-select> <el-select v-model="queueNameDoc" placeholder="队列名称选择(必填)" filterable allow-create clearable style="width: 350px; margin: 10px"> <el-option v-for="item in queueNameDocList" :key="item.value" :label="item.desc" :value="item.value"> </el-option> </el-select> <div slot="footer"> <el-button @click="showQueueDesc = false">取消</el-button> <el-button type="primary" @click="openLink">确认</el-button> </div> </el-dialog> 为什么我el-form-item label这行字显示不出来
可能是因为你没有在 `el-dialog` 的 `el-form` 标签内添加 `el-form-item` 标签,你可以尝试以下代码:
```html
<el-dialog :visible.sync="showQueueDesc">
<el-form>
<el-form-item label="<span style='color:black'>提示:可右键点击下方队列名直接跳转</span>">
</el-form-item>
<el-select v-model="serverIp" placeholder="请选择机器ip(必填)"
filterable allow-create clearable
style="width: 220px; margin: 10px">
<el-option
v-for="item in serverIpList"
:key="item.value"
:label="'server ip: ' + item.desc"
:value="item.value">
</el-option>
</el-select>
<el-select v-model="queueNameDoc" placeholder="队列名称选择(必填)"
filterable allow-create clearable
style="width: 350px; margin: 10px">
<el-option
v-for="item in queueNameDocList"
:key="item.value"
:label="item.desc"
:value="item.value">
</el-option>
</el-select>
<div slot="footer">
<el-button @click="showQueueDesc = false">取消</el-button>
<el-button type="primary" @click="openLink">确认</el-button>
</div>
</el-form>
</el-dialog>
```
这里我将 `el-form-item` 标签放在了 `el-form` 标签内,并且添加了缺失的 `el-form` 标签。
<el-form-item :label-width="formLabelWidth"> <div v-for="shelfLayerNum in shelfLayerNumList" :key="shelfLayerNum" class="box"> <el-row> <el-col :span="12"> <p v-if="formInsert.codeRule==1">右侧-第{{ shelfLayerNum.index }}节</p> <p v-if="formInsert.codeRule==2">左侧-第{{ shelfLayerNum.index }}节</p> </el-col> <el-col :span="2"> <p>层数:</p> </el-col> <el-col :span="10"> <el-input-number v-model="shelfLayerNum.value" :min="1" :max="10" @change="handleChange" /> </el-col> </el-row> </div> </el-form-item> </el-form> 这段代码出现Avoid using non-primitive value as key, use string/number value instead. 怎么解决
这个警告的原因是在使用 Vue 的 v-for 指令时,使用了一个非基本类型的值作为 key,而这可能会导致性能问题和不稳定的行为。为了解决这个问题,你可以将 key 值改为一个字符串或者数字。例如,你可以将代码改写为:
```
<el-form-item :label-width="formLabelWidth">
<div v-for="(shelfLayerNum, index) in shelfLayerNumList" :key="index" class="box">
<el-row>
<el-col :span="12">
<p v-if="formInsert.codeRule==1">右侧-第{{ shelfLayerNum.index }}节</p>
<p v-if="formInsert.codeRule==2">左侧-第{{ shelfLayerNum.index }}节</p>
</el-col>
<el-col :span="2">
<p>层数:</p>
</el-col>
<el-col :span="10">
<el-input-number v-model="shelfLayerNum.value" :min="1" :max="10" @change="handleChange" />
</el-col>
</el-row>
</div>
</el-form-item>
```
在这个例子中,我们将 key 值改为了索引值 `index`,这是一个基本类型的值,能够避免出现上述警告。