Dynamic Placeholder in Vue 3 with Global Component-CodePudding

I am trying to set dynamic text for the placeholder attribute on my search bar. Depending on the page, I want the text in the search bar to be different (I will define it in data()).

However, since the search bar component is a global component, it doesn't seem to be editable.

(As you see below is my try, I did it with v-model based on Vue docs, however when I try with placeholder it doesn't work...)

Snippet 1 - Search bar component

<template>
    <!-- Search Componenet -->
    <div >
        <br>
        <input  type="search" :placeholder="placeholderValue" :value="modelValue" @load="$emit('update:placeholderValue', $event.target.value)" @input="$emit('update:modelValue', $event.target.value)" />
    </div>
</template>

<script>
export default {
    props: ['modelValue', 'placeholderValue'],
    emits: ['update:modelValue', 'update:placeholderValue']
}
</script>

Snippet 2 - Album.vue

<template>
    <div >
    
        <h1>{{header}}</h1>
        <h2>{{header2}}</h2>
        <br>
    
        <!-- Search Componenet -->
    
        <SearchComponent :placeholder="placeholderValue" v-model="searchQuery" />
    
        <!-- Dynamic Song Route Button -->
        <div >
    
            <div v-for="item in datanew" :key="item.id">
                {{ item.album }}
            </div>
        </div>
    </div>
</template>
<script>
import { datatwo } from '@/data2'
export default {
    data() {
        return {
            placeholderValue: "Search for Albums here...",
            datanew: datatwo,
            searchQuery: null,
            header: "Browse by Album",
            header2: "Select an Album:",
            publicPath: process.env.BASE_URL

        };
    },
}
</script>

If this is possible?

CodePudding user response：

If you want to do it with v-model (the Childcomponent changes the value of the placeholder) you have to use v-model:placeholder for it to work. And also placeholderValue is not the way to go the "Value" at the end of a prop is only needed for modelValue which is the default v-model-binding (v-model="") but if you want named v-model-binding (v-model:placeholder="") you do not want to add the "Value" in the props and emits arrays.

Example:

usage of SearchComponent

<SearchComponent :placeholder="'placeholderValue'" v-model="searchQuery" />

instead of 'placeholderValue' you can put any string you want or variable. I just put the string 'placeholderValue' as an example.

SearchComponent

<template>
    <!-- Search Componenet -->
    <div >
        <br>
        <input  type="search" :placeholder="placeholder" :value="modelValue" @load="$emit('update:placeholderValue', $event.target.value)" @input="$emit('update:modelValue', $event.target.value)" />
    </div>
</template>

<script>
export default {
    name: "SearchComponent",
    props: ['modelValue', 'placeholder'],
    emits: ['update:modelValue'],
}
</script>

<style scoped>

</style>