Vue.js 3.0 Tutorial

Vue.js 3.0 Component Advanced

Vue.js 3.0 Transitions & Animations

Vue.js 3.0 Reusable & Combinable

Vue.js 3.0 Advanced

Vue.js 3.0 Tools

Vue.js 3.0 Scale

Vue.js 3.0 Accessibility

Vue.js 3.0 Migrating from Vue2

Vue.js 3.0 Contribute Documentation

Vue.js 3.0 API References

Vue.js 3.0 Style Guide

Vue 3.0 Style Guide

Ref array in Vue 3.0 v-for

Vue 3.0 introduced the ref API as part of its new composition API. The ref function creates a reactive reference to a value. This can be particularly useful when dealing with arrays in a v-for directive.

Here's how you can use a ref with an array in Vue 3.0.

Firstly, we import ref from vue:

import { ref } from 'vue';

We can then create a ref for our array:

const items = ref([]);

Then we can fill the array with some values:

items.value = ['Apple', 'Banana', 'Cherry'];

Now, we can use this ref in a v-for directive in our template:

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

And in our script section:

<script>
import { ref } from 'vue';

export default {
  setup() {
    const items = ref(['Apple', 'Banana', 'Cherry']);

    return {
      items
    };
  }
};
</script>

Remember to access the value of a ref using .value.

Vue 3.0's ref function also works well with the reactive data model. It allows you to create reactive variables that can be used across your Vue.js application.

Vue 3.0 using refs in v-for loop:

Description: You can use ref in a v-for loop to create individual refs for each item in an array.

Code:

<!-- RefInVFor.vue -->
<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <input :ref="'inputRef' + index" v-model="item.value" />
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const items = ref([
      { value: 'Item 1' },
      { value: 'Item 2' },
      { value: 'Item 3' },
    ]);

    return { items };
  },
};
</script>

Vue 3.0 dynamic ref array binding:

Description: You can dynamically create and bind refs to an array for more flexibility.

Code:

<!-- DynamicRefArray.vue -->
<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <input :ref="refArray[index]" v-model="item.value" />
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const items = ref([
      { value: 'Item 1' },
      { value: 'Item 2' },
      { value: 'Item 3' },
    ]);

    const refArray = ref([]);

    // Dynamically create refs
    items.value.forEach((_, index) => {
      refArray.value[index] = ref(null);
    });

    return { items, refArray };
  },
};
</script>

Vue 3.0 manipulating ref arrays in v-for:

Description: You can manipulate the ref array within the v-for loop and use it to access and modify elements.

Code:

<!-- ManipulatingRefArray.vue -->
<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <input :ref="setRef(index)" v-model="item.value" />
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const items = ref([
      { value: 'Item 1' },
      { value: 'Item 2' },
      { value: 'Item 3' },
    ]);

    const refArray = ref([]);

    const setRef = (index) => (refArray.value[index] = ref(null));

    return { items, refArray, setRef };
  },
};
</script>

Vue 3.0 accessing ref array values in v-for:

Description: You can access the values of a ref array within a v-for loop to perform operations.

Code:

<!-- AccessingRefArrayValues.vue -->
<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <input :ref="setRef(index)" v-model="item.value" />
      <button @click="logValue(index)">Log Value</button>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const items = ref([
      { value: 'Item 1' },
      { value: 'Item 2' },
      { value: 'Item 3' },
    ]);

    const refArray = ref([]);

    const setRef = (index) => (refArray.value[index] = ref(null));

    const logValue = (index) => {
      console.log(refArray.value[index].value);
    };

    return { items, refArray, setRef, logValue };
  },
};
</script>

Vue 3.0 ref array reactivity in v-for:

Description: Ref arrays are reactive, and changes to their length or elements trigger reactivity in the template.

Code:

<!-- RefArrayReactivity.vue -->
<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <input :ref="setRef(index)" v-model="item.value" />
    </div>
    <button @click="addItem">Add Item</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const items = ref([
      { value: 'Item 1' },
      { value: 'Item 2' },
      { value: 'Item 3' },
    ]);

    const refArray = ref([]);

    const setRef = (index) => (refArray.value[index] = ref(null));

    const addItem = () => {
      items.value.push({ value: `Item ${items.value.length + 1}` });
    };

    return { items, refArray, setRef, addItem };
  },
};
</script>

Vue 3.0 v-for with ref array and methods:

Description: Use a combination of v-for with a ref array and methods to create dynamic and interactive components.

Code:

<!-- RefArrayWithMethods.vue -->
<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <input :ref="setRef(index)" v-model="item.value" />
      <button @click="removeItem(index)">Remove</button>
    </div>
    <button @click="addItem">Add Item</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const items = ref([
      { value: 'Item 1' },
      { value: 'Item 2' },
      { value: 'Item 3' },
    ]);

    const refArray = ref([]);

    const setRef = (index) => (refArray.value[index] = ref(null));

    const addItem = () => {
      items.value.push({ value: `Item ${items.value.length + 1}` });
    };

    const removeItem = (index) => {
      items.value.splice(index, 1);
      refArray.value.splice(index, 1);
    };

    return { items, refArray, setRef, addItem, removeItem };
  },
};
</script>

Vue 3.0 iterating over ref arrays in templates:

Description: Iterate over a ref array in the template and access values and methods.

Code:

<!-- IteratingOverRefArrays.vue -->
<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <input :ref="setRef(index)" v-model="item.value" />
      <button @click="removeItem(index)">Remove</button>
    </div>
    <button @click="addItem">Add Item</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const items = ref([
      { value: 'Item 1' },
      { value: 'Item 2' },
      { value: 'Item 3' },
    ]);

    const refArray = ref([]);

    const setRef = (index) => (refArray.value[index] = ref(null));

    const addItem = () => {
      items.value.push({ value: `Item ${items.value.length + 1}` });
    };

    const removeItem = (index) => {
      items.value.splice(index, 1);
      refArray.value.splice(index, 1);
    };

    return { items, refArray, setRef, addItem, removeItem };
  },
};
</script>