CODEWITHSUNDEEP
vue.jswritable
Khaled
Khaled

Reputation: 21

How to use writable computed

In the following code am trying to change the ref value of the constant 'title' inside the computed setter, So I expect to change the value of 'title' when the computed start

<template>
<h3>Title = {{ title }}</h3>
<input v-model="firstName" type="text" placeholder="insert fname">
<input v-model="lastName" type="text" placeholder="insert last name">
<h3>---------------- Message ----------------------</h3>
<h4>{{ fullName}}</h4>
</template>


<script lang="ts" setup>
import {computed, ref} from 'vue'

const firstName=ref('')
const lastName = ref('')
const title = ref('')
const fullName = computed({
  get(){
    return firstName.value+' '+lastName.value
  }
  ,set(val){
    title.value=val+'NORMAL'
  }
  })


</script>

Upvotes: 1

Views: 470

Answers (1)

kissu
kissu

Reputation: 46604

Something like this is easier to understand and works well IMO.

<template>
  <h3>Title = {{ updatedTitle }}</h3>
  <input v-model="firstName" type="text" placeholder="insert fname">
  <input v-model="lastName" type="text" placeholder="insert last name">

  <h3>---------------- Message ----------------------</h3>
  
  <h4>{{ fullName}}</h4>
</template>


<script setup lang="ts">
import { computed, ref } from 'vue'

const firstName=ref('')
const lastName = ref('')

const fullName = computed(() => firstName.value + ' ' + lastName.value)
const updatedTitle = computed(() => fullName.value + 'NORMAL')
</script>

Here's a playground.

Upvotes: 3

Related Questions