I am creating a table based on this https://xaksis.github.io/vue-good-table/.
I have this vue code:
https://codeshare.io/8pMvzZ
In this created method I am getting data as JSON object. In this object I have property called id_project. I have set this id as pid. If you see that code you can see that.
Now, On this section
<b-dropdown-item href="/projects/update/">
<feather-icon icon="Edit2Icon" class="mr-50" />
<span>Edit</span>
</b-dropdown-item>
<b-dropdown-item href="/projects/update/">
<feather-icon icon="TrashIcon" class="mr-50" />
<span>Delete</span>
</b-dropdown-item>
I need to set that id_project value to href attribute.
Would you please tell me how can I set the href value?
Related
I want to show a translation on the title of a component.
Here is the HTML code:
<user-card
:totalUser="totalUsers"
color="primary"
icon="UserIcon"
user-title="Total users"
/>
On my user-card component I have this:
<b-card class="text-center">
<b-avatar
:variant="`light-${color}`"
class="mb-1"
size="45"
>
<feather-icon
:icon="icon"
size="21"
/>
</b-avatar>
<div class="truncate">
<h2 class="mb-25 font-weight-bolder">
{{ totalUser}}
</h2>
<span>{{ user-title }}</span>
</div>
</b-card>
And to use translation I have this syntax where I get the translated terms from the JSON file:
{{$t("Total users")}}
How can I implement this on the user-title?
Have a look at this, I have tried to replicate your scenario in code sandbox.
sample app
What you are doing wrong is that $t is a function that accepts variable name which has an actual message in it, first you have to define a variable e.g totalUserTitle: 'Total users' for multiple languages like I did in index.js, and then you can use it as $t(totalUserTitle).
Just use v-bind and pass the expression to your user-card component directly:
<user-card
...
:user-title="$t('Total users')"
/>
You're actually already using this syntax in multiple places, this directive just tells Vue to "dynamically bind one or more attributes, or a component prop to an expression", which is exactly what you're looking for here.
This will evaluate $t('Total users') as an expression and then pass the result to your component as a prop.
How to pass attributes from component to slot?
This is in component
<navigation-link url="/profile">
Your Profile
</navigation-link>
Then in the template I want to use url
<template>
<div>
<a
v-bind:href="url"
class="nav-link">
<slot></slot>
</a>
<span class="active></span>
<div>
</template>
according to docs this should work, but instead I get error: Property or method "url" is not defined on the instance but referenced during render.
I think you want to put the text "Your Profile" in <slot></slot>
So, for this, you need to do this.
<navigation-link url="/profile">
<template slot="text">
Your Profile
</template>
</navigation-link>
And in the component, name the slot like this
<template>
<div>
<a
v-bind:href="url"
class="nav-link">
<slot name="text" />
</a>
<span class="active></span>
<div>
</template>
Probably, this work.
EDIT:
according to docs this should work, but instead I get error: Property or method "url" is not defined on the instance but referenced during render.
That is because, you are not declaring url in the component, you probably need to put
props: ['url'],
data() {
return {
propUrl: this.url
}
}
and in the template use this.propUrl
Regards
We are iterating through a JSON object and setting the UI fields dynamically, using the tag. That works fine. However, there is one attribute in that JSON object, "value" that we wish to use to set the default value of those UI fields, such as a default text in a TextInput. What attribute should we set in the "component" tag to achieve this ? Appreciate your help in getting this done.
<div v-for="(form, index) in forms"
:key="index"
v-bind="form"
class="form__group">
<label class="form__label" v-model="form.label">{{ form.label }}</label>
<component :is="form.fieldType"
:currentField="form"
class="form__field">
</component>
</div>
The JSON node that is being passed to the component through ":currentField='form'" should be used to set the default value. Like this-
<el-input
type="text"
v-model="form.value">
</el-input>
<script>
export default {
name: 'TextInput',
props: ['form']
}
</script>
Thanks to #kitschmaster for directing my thoughts properly
I have Vue drop-down.
<b-dropdown id="dropdown-1" text= "UserName" class="m-md-2" >
<b-dropdown-item class="dropdown-link">Log out</b-dropdown-item>
</b-dropdown>
I need t change value of drop down. In my case it's UserName
I only found this way:
document.getElementById("dropdown-1").childNodes[1].innerHTML="new value"
I know it's not correct way but I didn't find correct way (via the API or something like that). This method does not work too:
text= "{{ variable }}"
Any ideas?
You can bind a dynamic value for text prop on <b-dropdown> and change it with the click event of <b-dropdown-item>
<b-dropdown :text="buttonTitle">
<b-dropdown-item #click="buttonTitle = 'new value'">Log out</b-dropdown-item>
</b-dropdown>
//script
data () {
return {
buttonTitle: 'Username'
}
}
MuratK is probably right, however I understand that you want to bind the dropdown item, not the parent element. You could do so with a v-for and text binding, like:
<b-dropdown id="dropdown-1" class="m-md-2" >
<b-dropdown-item v-for="item in items" v-text="item"></b-dropdown-item>
</b-dropdown>
Then, in your data define 'items' as an array of strings, such as ['log out', 'preferences', 'sign it']. You can also use this syntax, it does the same in your example:
<b-dropdown-item v-for="item in items">{{ item }}</b-dropdown-item>
To make text dynamic, you should bind it to a variable of your Vue component instance. An HTML attribute can be made dynamic and bound to a variable by using the : prefix before the attribute name (which is a shorthand of v-bind:)
Given :
<b-dropdown id="dropdown-1" :text="variable" class="m-md-2" >
<b-dropdown-item class="dropdown-link">Log out</b-dropdown-item>
</b-dropdown>
In the component you should have the corresponding variable declaration :
data() {
return {
variable: '' // Variable initialisation
}
}
I've el-select option with photo, in option i can get photo variable but in default value i can't get defult value with photo.
can you help me?
Expected: default value is McDonald (photo + label)
here my code:
<el-select v-model="value" placeholder="Select">
<el-option v-for="item in outlet" :key="item.value" :label="item.label" :value="item.value">
<img :src="item.photo"> {{ item.label }}
</el-option>
</el-select>
and here is my fiddle:
https://jsfiddle.net/dede402/L4y8zw1e/10/
The selected value template and options templates are differents. el-select allow you to define a prefix slot for the selected template, take a look at : https://jsfiddle.net/budgw/L4y8zw1e/36/
Note that I change your el-select in order to use directly an object as selected value. In that case you have to specify the value-key on el-select.