javascript - 在 vue.js、quasar 框架中启用复选框检查功能

Question

我有两个复选框，“显示事件”和“显示实时” 最初“实时显示”被禁用。

我想要这样的功能:选中“显示事件”时，启用“显示实时”；取消选中“显示事件”时，取消选中并禁用“显示实时”。

这是代码:

<div id="q-app">
<q-checkbox left-label v-model="searchForm.active" label="Show Active"></q-checkbox>
  <q-checkbox left-label v-model="searchForm.live" label="Show Live"></q-checkbox>
</div>

<script>
const {
  useQuasar
} = Quasar
const {
  ref,
  onMounted,
  reactive
} = Vue

const app = Vue.createApp({
  setup() {
    const $q = useQuasar()

    const searchForm = reactive({
      active: false,
      live: false
    });

    function notify() {
      $q.notify('Running on Quasar v' + $q.version)
    }

   

    return {
      notify,
      searchForm
    }
  }
})

app.use(Quasar, {
  config: {}
})
app.mount('#q-app')

</script>

https://jsfiddle.net/ubjsf2zv/10/

我是 vue.js 和 quasar 框架的新手

Answer 1

解决方案是使用带有条件的禁用 Prop 。

我在 https://jsfiddle.net/jLxg3q7m/ 上创建了一个示例

我们必须这样做:

<q-checkbox :disable="searchForm.active === false && (searchForm.live = false)" left-label v-model="searchForm.live" label="Show Live"></q-checkbox>

我添加此 :disable="searchForm.active === false && (searchForm.live = false)":

• 第一个条件searchForm.active === false将禁用他， 如果 active 为 false。
• 第二部分(searchForm.live = false)将把live分配给 值false。