Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to watch for change on a specific input in list of inputs in Vue 3

I am attempting to set up a vue 3 watcher that watches for changes to input fields in a v-for list. I set up an array of objects, each with a type. I want to add input to the field with the type "owl", then watch for a change only on that field. However, when I bind the input field in the loop to inputValue then add text to the field with label "Owl", my inputted text shows up on all of the inputs. How can I go about setting up the input field to only display text on input "Owl" in the loop?

Here is my code so far:

<template>
  <div class="border-t border-gray-200 px-4 py-5 sm:px-6">
    <dl class="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2">
      <div v-for="input in inputs" :key="input.label" class="sm:col-span-1">
        <dt class="text-sm font-medium text-gray-500">
          <div class="flex">
            <span>{{ input.label }}</span>
          </div>
        </dt>

        <dd class="mt-1 text-sm text-gray-900">
          <input
            v-model="inputValue"
          />
        </dd>
      </div>
    </dl>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, watch, toRaw } from "vue";

const inputValue = ref()

const inputs = ref([
  { label: "Dog", type: "dog" },
  { label: "Cat", type: "cat" },
  { label: "Owl", type: "owl" },
  { label: "Rabbit", type: "rabbit" },
  { label: "Horse", type: "horse" },
]);


watch(inputValue, () => {
  console.log(inputValue.value)
})
</script>

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

Not sure I’m following but if you only want to bind the model to the owl type you could use conditional rendering:

<input v-if="input.type === 'owl'" v-model="inputValue" />
<input v-else :value="input.type" />
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading