如何配置VUE 3中的复选框输入在单击图像时检查/取消选中

发布于 2025-01-30 18:11:14 字数 970 浏览 0 评论 0原文

我正在设置一个DIV容器，以包括一个图像和输入元素，其中包含复选框。复选框输入包括一个单击处理程序，该处理程序将值作为参数传递给某些函数。输入还包括一个：值绑定，该数组传递给一个称为checkboxarray的数组。最后，输入使用v-model = checkboxarray检查数组何时包含一个值。如果数组包含一个值，则将检查复选框。我还希望启用单击复选框旁边的图像，以便检查并取消选中复选框。但是，只需将点击处理程序添加到图像是不够的。我该如何在图像元素上启用单击处理程序还可以检查并取消选中一个框？

到目前为止，这是我的代码：

          <div v-for="item in items" :key="item.id">
            <span class="flex-1 flex">
              <span class="flex flex-col mr-4 mt-16">
                <input v-model="checkBoxArray" :value="item.id" @click="someFunction(item.id)" type="checkbox" class="h-5 w-5" />
              </span>
              <span class="flex flex-col">
                <img @click="someFunction(item.id)" class="h-full w-full" :src="item.image_url" alt="" />
              </span>
            </span>
          </div>

const checkBoxArray = ref([])

原文

I am setting up a div container to include both an image and an input element with type checkbox. The checkbox input includes a click handler that passes a value as an argument to some function. The input also includes a :value binding, which is passed to an array called checkBoxArray. Finally, the input uses v-model=checkBoxArray to check when the array contains a value. If the array contains a value, then the checkbox will be checked. I also wish to enable clicking on an image next to the checkbox, in order to also check and uncheck the checkbox. However, simply adding the click handler to the image is not enough. How can I go about enabling a click handler on the image element to also check and uncheck a box?

Here is my code so far:

          <div v-for="item in items" :key="item.id">
            <span class="flex-1 flex">
              <span class="flex flex-col mr-4 mt-16">
                <input v-model="checkBoxArray" :value="item.id" @click="someFunction(item.id)" type="checkbox" class="h-5 w-5" />
              </span>
              <span class="flex flex-col">
                <img @click="someFunction(item.id)" class="h-full w-full" :src="item.image_url" alt="" />
              </span>
            </span>
          </div>

const checkBoxArray = ref([])

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

兔姬 2025-02-06 18:11:14

如果我理解您正确地尝试，就像按照摘要：

const { ref } = Vue
const app = Vue.createApp({
  setup() {
    const checkBoxArray = ref([])
    const items = [{id: 0, image_url:  'https://picsum.photos/50'}, {id: 1, image_url: 'https://picsum.photos/51'}]
    const someFunction = (id) => {
      checkBoxArray.value[id] = !checkBoxArray.value[id]
      console.log(id)
    }
    return {
      checkBoxArray, items, someFunction
    };
  },
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div v-for="item in items" :key="item.id">
    <span class="flex-1 flex">
      <span class="flex flex-col mr-4 mt-16">
        <input v-model="checkBoxArray[item.id]"  @click="someFunction(item.id)" type="checkbox" class="h-5 w-5" />
      </span>
      <span class="flex flex-col">
        <img @click="someFunction(item.id)" class="h-full w-full" :src="item.image_url" alt="" />
      </span>
    </span>
{{checkBoxArray}}
  </div>
</div>

If I understood you correctly try like following snippet:

const { ref } = Vue
const app = Vue.createApp({
  setup() {
    const checkBoxArray = ref([])
    const items = [{id: 0, image_url:  'https://picsum.photos/50'}, {id: 1, image_url: 'https://picsum.photos/51'}]
    const someFunction = (id) => {
      checkBoxArray.value[id] = !checkBoxArray.value[id]
      console.log(id)
    }
    return {
      checkBoxArray, items, someFunction
    };
  },
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div v-for="item in items" :key="item.id">
    <span class="flex-1 flex">
      <span class="flex flex-col mr-4 mt-16">
        <input v-model="checkBoxArray[item.id]"  @click="someFunction(item.id)" type="checkbox" class="h-5 w-5" />
      </span>
      <span class="flex flex-col">
        <img @click="someFunction(item.id)" class="h-full w-full" :src="item.image_url" alt="" />
      </span>
    </span>
{{checkBoxArray}}
  </div>
</div>

回复收藏 0 原文

~没有更多了~