CODEWITHSUNDEEP
javascriptarraysvue.jsvue-componentvuejs3
JS_is_awesome18
JS_is_awesome18

Reputation: 1757

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>

Upvotes: 0

Views: 709

Answers (1)

Stephen Gilboy
Stephen Gilboy

Reputation: 5825

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" />

Upvotes: 2

Related Questions