How to add a property to reactive object VueJS 3?

Viewed 329
export default {
  setup() {
    const imageUrl = ref("");
    const title = ref("");
    const description = ref("");
    var source = "Global";

    const form = reactive({
      title: "",
      description: "",
      // src: source,
    });
    //...
  }
}

How do I add src: "source" (a new property) to form (the reactive object)? Like how we append on ref.

1 Answers

You can assign the field directly via form.src = source. For example, you could have a function that does this:

const addSourceToForm = () => form.src = source

And you can call that function later, e.g., from a button click:

<button @click="addSourceToForm">Add source</button>

demo

Related