// pseudo code

// same type between modelValue and image
props = { modelValue? }
image = ref()

onPageLoad = function {
  if modelValue is null then:
    image.value = await api.get()
}

<button @onClick>

// if model is null
<image src="image?.src" />
// else
<image src="modelValue?.src" />

how to do that?

modelValue props set optionally.

if not set, then ref set with onPageLoad

I rendering by modelValue or ref

should I use watch? or watchEffect?

CodePudding user response：

Define the modelValue as prop and update the image ref in onMounted hook, then use a computed property to return the image source :

<script setup>
import {ref, computed, onMounted} from 'vue'

const props = defineProps(['modelValue']);
const image=ref('')

onMounted(async ()=>{
   image.value = await api.get()
})

const src = computed(()=>props.modelValue.src??image.value)

</script>

<img :src="src" />