Vue.在模板标签内执行JS,不渲染

m3eecexj  于 2023-05-01  发布在  Vue.js
关注(0)|答案(1)|浏览(219)

我正在尝试执行标记内的代码。
我有两个数组,一个是数据集,另一个是中继器的结构。模式在每个对象内部都有一个“值”属性,即在数据集对象不包含任何值的情况下的默认值。

schema:[
  { type: 'text', name:'name', value:'John'},
  { type: 'number', name:'age', value:'0' }
]

dataset: [
  { name: 'Peter', age: 18 },
  { name: 'Luca' },
  { name: 'Anna', age: 25 }
]

我正在尝试做一个包含输入的中继器,并用dataset填充数据。
下面的代码工作正常,代码后我解释我的问题。

<template>
    <div class="repeater-container">
        <div class="repeater-wrapper">
            <div 
                class="repeater-item"
                v-for="(repeaterData, i) in dataset"
            >
                <template
                    v-for="(input, y) in schema"
                    :key="name+(i+1)+'_instance'+(y+1)"
                >
                    {{ (dataset[i][input.name]) ? input.value = dataset[i][input.name] : '' }}

                    <Input
                        :input="input"
                    />
                </template>
                
            </div>
        </div>
    </div>
</template>

我有一个循环,使重复呈现相同的项目,数据集包含。在这个循环中,我有另一个循环,它打印模式内容的每个输入。
但我尝试取数据集值,但如果没有值,取默认值。
所有这些都在起作用,但这条线:{{(dataset[i][ www.example.com ])?input.value = dataset[i][ www.example.com ]:'' }}正在呈现值。我想知道如何执行相同的逻辑,但避免渲染三进制条件的结果。
输入组件是我的,工作正常。我不分享它,因为它无关紧要,而且有更多的代码需要阅读,这会使阅读变得复杂。
感谢您的关注:)

csga3l58

csga3l581#

我会尝试使用一个名为processessedItems的计算属性,它对数据进行预处理,并为每个项添加一个displayValue属性。前几天我遇到了类似的问题。

相关问题