如何在vuejs中从json设置条件字段

rwqw0loc 于 2023-01-17 发布在 Vue.js

关注(0)|答案(1)|浏览(147)

从动态方案在表单中创建条件的最佳方法是什么？
我正在使用一个json列表来设置我的表单，在我的json列表中，我想添加一个函数，在那里我可以验证一些逻辑来检查字段是否应该可见/必需，或者例如用表单中的其他值来验证该值。
这是我的json表单的一部分：

..
  "colour": {
    compType: 'radiobox',
    label: 'Colour',
    options: [
      { value: 'red', label: 'Red' },
      { value: 'green', label: 'Green' },
      { value: 'blue', label: 'Blue' },
    ],
  },
  "model" : {
    condition: testCondition,  <----(Function which returns true if the field colour is red)
    compType: 'select',
    label: 'Role model',
    subLabel: 'Who do you look up to?',
    options: [
      { value: '', label: 'Select one', disabled: true },
      { value: 'captain-america', label: 'Steve Rogers/Captain America' },
      { value: 'iron-man', label: 'Tony Stark/Iron Man' },
      { value: 'thor-odinson', label: 'Thor Odinson' },
      { value: 'the-hulk', label: 'Bruce Banner/The Hulk' },
      { value: 'black-widow', label: 'Natasha Romanoff/Black Widow' },
      { value: 'hawkeye', label: 'Clint Barton/Hawkeye' },
    ],
  },
..

然后我通过我的模板浏览它。

...
      <q-select v-else-if="prop.compType === 'select' && prop.condition" 
        outlined
        v-model="dataRef[key]"
        :options="prop.options"
        :label="prop.label"
        >
      </q-select>
...

这个函数应该看起来像这样：

const testCondition = () => {
  //how can I reach my ref Form data to check if the field needs to be visible
}

但是因为表单还没有初始化，我得到了一个“初始化前无法访问”的错误。有人能帮助我走上正确的道路吗？对我来说已经足够了。
PS：我知道有图书馆在做这件事，但我宁愿自己去学习和理解它。

vue.js

来源：https://stackoverflow.com/questions/75122643/how-to-setup-conditional-field-from-json-within-vuejs

1条答案

按热度按时间

xqk2d5yq1#

请看下面的代码片段（您可以将testCondition函数扩展到所有需要的情况）：

const { ref, onMounted } = Vue
const app = Vue.createApp({
  setup () {
    const fields = [{
      compType: 'radiobox',
      label: 'Colour',
      model: 'color',
      options: [
        { value: 'red', label: 'Red' },
        { value: 'green', label: 'Green' },
        { value: 'blue', label: 'Blue' }
      ]
    },
    {
      condition: true,  
      compType: 'select',
      model: "role",
      label: 'Role model',
      subLabel: 'Who do you look up to?',
      options: [
        { value: '', label: 'Select one', disabled: true },
        { value: 'captain-america', label: 'Steve Rogers/Captain America' },
        { value: 'iron-man', label: 'Tony Stark/Iron Man' },
        { value: 'thor-odinson', label: 'Thor Odinson' },
        { value: 'the-hulk', label: 'Bruce Banner/The Hulk' },
        { value: 'black-widow', label: 'Natasha Romanoff/Black Widow' },
        { value: 'hawkeye', label: 'Clint Barton/Hawkeye' }
      ]
    }
  ]
  const dataRef = ref({})
  const testCondition = (id) => {
    if(id === 'role') {
      if(dataRef.value.color === 'red') {
        dataRef.value.role = null
        return false
      }
      return true
    }
  }
  onMounted(() => {
    for(field of fields) {
      dataRef.value[field.model] = null
    }
  })
  return { testCondition, dataRef, fields }
  }
})

app.use(Quasar)
app.mount('#q-app')

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/quasar@2.5.5/dist/quasar.prod.css" rel="stylesheet" type="text/css">

<div id="q-app">
  <div v-for="(prop, key) in fields" :key="key">
    <q-option-group v-if="prop.compType === 'radiobox' && (prop.condition ? testCondition(prop.model) : true)"
      :options="prop.options"
      type="radio"
      v-model="dataRef[prop.model]"
    ></q-option-group>
    <q-select v-if="prop.compType === 'select' && (prop.condition ? testCondition(prop.model) : true)"
      outlined
      v-model="dataRef[prop.model]"
      :options="prop.options"
      :label="prop.label"
      >
    </q-select>
  </div>
  {{dataRef}}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@2.5.5/dist/quasar.umd.prod.js"></script>

赞(0）回复(0）举报 2023-01-17

我来回答

如何在vuejs中从json设置条件字段

1条答案

相关问题

热门标签

最新问答