javascript / beginner
Snippet
Appending Items to a Reactive Array
In Vue 3 with the Composition API, arrays wrapped in `ref` trigger automatic reactivity updates when modified with standard JavaScript mutating array methods like `push()`. Sanitizing string input before adding it to an array prevents blank entries from polluting application state.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
import { ref } from 'vue';const taskList = ref(['Buy groceries', 'Read documentation']);function addNewTask(taskName) {if (taskName && taskName.trim() !== '') {taskList.value.push(taskName.trim());}}
vue
Breakdown
1
const taskList = ref(['Buy groceries', 'Read documentation']);
Initializes a reactive reference containing an array of string items.
2
if (taskName && taskName.trim() !== '') {
Verifies that the parameter is a non-empty string after stripping whitespace.
3
taskList.value.push(taskName.trim());
Appends the cleaned task string to the reactive array via the .value property.