javascript - 使用 Vue 公式化模式时，有没有办法隐藏或显示输入？

Question

我一直在尝试使用 Vue Formulate 模式创建一个表单。具体来说，我想要两个单选按钮，A 和 B。单击 A 时，下面必须出现一个额外的输入字段。单击 B 时，必须隐藏此输入字段。

我使用模式很重要。

有任何想法吗？

Answer 1

在 Vue Formulate 中，模式本身是反应式的，因此使用模式执行条件字段的建议是首先通过计算属性传递模式。例如：

<template>
  <FormulateForm
    v-model="formValues"
    :schema="conditionalSchema"
  />
</template>

<script>
const schema = [
  {
    type: "radio",
    options: { a: 'A', b: 'B' },
    label: 'Do you like a or b?',
    name: 'question',
    id: 'question'
  },
  {
    type: 'text',
    name: 'c',
    id: 'c',
    label: 'If you like b, then you must like c!'
  }
]

export default {
  data () {
    return {
      formValues: {}
    }
  },
  computed: {
    conditionalSchema() {
      if (this.formValues.question !== 'b') {
        return schema.filter(({ name }) => name !== 'c')
      }
      return schema
    }
  }  
}
</script>

这是 CodePen 中的代码：https ://codepen.io/justin-schroeder/pen/dyXPGQL