I have to use i18n variables for a select dropdown in the form.
I can access i18n data in main.js like this :
// Load locales
axios
.get("http://localhost:3000/data")
.then(({data}) => {
console.log(data);
appOptions.i18n.setLocaleMessage("fr", basil.get(data, "fr", {}));
appOptions.i18n.setLocaleMessage("en", basil.get(data, "en", {}));
appOptions.i18n.setLocaleMessage("nl", basil.get(data, "nl", {}));
})
.catch((error) => {
console.error(error);
});
In my form component I can use these date for example for simple field like this :
<div class="success" v-if="success">
{{ $t("contact.success_message") }}
</div>
I would like to use v-for for select options with "$t" variable . Something like this don't work :
<option
v-for="item in $t("register")"
:key="item"
:value="item"
>
{{ item }}
Can you please tell me how can I achieve this if I have to follow the structure of the json file with i18n variable :
{
es: {
contact: {
contact_demo: "Contáctenos para una demostración",
contact_sales: "Comuníquese con ventas",
...
},
register: {
option_Germany: "Alemania",
option_Morocco: "Marruecos",
option_Belgium: "Bélgica",
option_Cook Islands: "Islas Cook",
...
found the solution :
<select id="countries">
<option
v-for="value in $t('register',)"
:key="value"
>
{{ value }}
</option>
</select>
Related
I'm using Vue-multiselect 2.1.4
It works like a charm when I use single select with array options. But in case of using single select with array of objects, all items are green and they are not selectable! (They have "is-selected" class)
To clarify the problem, I used the sample code from the project website and replace the options with my data.
<multiselect v-model="value" deselect-label="Can't remove this value"
track-by="name" label="name" placeholder="Select one"
:options="options" :searchable="false" :allow-empty="false">
<template slot="singleLabel" slot-scope="{ option }">
<strong>{{ option.name }}</strong> is written in
<strong> {{ option.language }}</strong>
</template>
</multiselect>
const config = {
data() {
return {
value: null,
options: []
}
},
async mounted() {
await this.getTerminals();
},
methods: {
async getTerminals() {
await window.axios.get("/api/Operation/GetTerminals")
.then(resp => {
this.$data.options = resp.data;
})
.catch(err => {
console.error(err);
});
},
}
};
const app = Vue.createApp(config);
app.component('Multiselect', VueformMultiselect);
app.mount('#app');
In case of array of objects, first you need to populate the values in object and then push the object in options array. And there will be few changes in the template as well. For example if your object is like this, following will work:
data(){
return{
value: null,
option: {
value: "",
name: "",
icon: "",
},
options: [],
}
},
methods: {
getData(){
//call your service here
response.data.list.forEach((item, index) => {
self.option.value = item.first_name + item.last_name;
self.option.name = item.first_name + " " + item.last_name;
self.option.icon =
typeof item.avatar !== "undefined" && item.avatar != null
? item.avatar
: this.$assetPath + "images/userpic-placeholder.svg";
self.options.push({ ...self.option });
});
}
}
Then in the template fill the options like this:
<Multiselect
v-model="value"
deselect-label="Can't remove this value"
track-by="value"
label="name"
:options="options"
:searchable="false"
:allow-empty="false"
>
<template v-slot:singlelabel="{ value }">
<div class="multiselect-single-label">
<img class="character-label-icon" :src="value.icon" />
{{ value.name }}
</div>
</template>
<template v-slot:option="{ option }">
<img class="character-option-icon" :src="option.icon" />
{{ option.name }}
</template>
</Multiselect>
Call your getData() function in created hook.
For me the solution was to use the "name" and "value" keys for my object. Anything else and it doesn't work (even if they use different keys in the documenation). This seems like a bug, but that was the only change I needed to make.
I am creating a custom select component in VueJS 2. The component is to be used as below by the end-user.
<custom-select>
<option value="value 1">Option 1</option>
<option value="value 2">Option 2</option>
<option value="value 3">Option 3</option>
...
<custom-select>
I know the Vue <slot> tag and usage. But how do I get the user provided <option> tags as an array/list so I can get its value and text separately for custom rendering inside the component?
Those <option>s would be found in the default slot array (this.$slots.default), and you could get to the inner text and value of the <option>s like this:
export default {
mounted() {
const options = this.$slots.default.filter(node => node.tag === 'option')
for (const opt of options) {
const innerText = opt.children.map(c => c.text).join()
const value = opt.data.attrs.value
console.log({ innerText, value })
}
}
}
demo
You can achieve it, using v-bind and computed property
new Vue({
el: '#vue',
data: {
selected: '',
values: [
{
code: '1',
name: 'one'
},
{
code: '2',
name: 'two'
}
]
},
computed: {
selectedValue() {
var self = this;
var name = "";
this.values.filter(function(value) {
if(value.code == self.selected) {
name = value.name
return;
}
})
return name;
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="vue">
<div>
<select v-model="selected">
<option v-for="value in values" v-bind:value="value.code">
{{ value.name }}
</option>
</select>
</div>
<strong>{{ selected }} {{ selectedValue }}</strong>
</div>
I use nuxt-i18n nuxt-i18n documentation link to get different locales on my website like that :
<nuxt-link v-for="locale in $i18n.locales"
v-if="locale.code !== $i18n.locale"
:key="locale.code"
:to="switchLocalePath(locale.code)"
class="locales white--text"
>{{ locale.code }}
</nuxt-link>
And it works perfectly fine but i want to transform this code to render in a select element:
<select v-model="selected" class="locales white--text" #change=" ??? ">
<option disabled value="">{{ $i18n.locale }}</option>
<option v-for="locale in $i18n.locales" :key="locale.code">{{ locale.code }}</option>
</select>
Locales strings appears well but i don't dind a solution to launch the switchLocalePath function on change. Is there a proper way to do that with nuxt (vue.js) ?
Here you are, the dropdown list and the onChange method:
<select v-model="selectedValue" #change="onChange(selectedValue)">
<option disabled value>Please select one</option>
<option
v-for="(locale, index) in $i18n.locales"
:key="index"
:value="locale.code"
>{{locale.name}}</option>
</select>
methods: {
onChange(event) {
this.$router.replace(this.switchLocalePath(event));
}
}
If you want to check working I have build a CodeSandox Nuxt working here:
https://codesandbox.io/embed/codesandbox-nuxt-1bhug?fontsize=14&hidenavigation=1&theme=dark
Also there is no need to use the router to change the locale, the API can be used too using this.$i18n.setLocale(locale)
<select v-model="activeLang" #change="changeLang" name="lang" id="">
<option
:selected="locale === activeLang"
v-for="locale in locales"
:key="locale"
:value="locale"
>
{{ locale }}
</option>
</select>
changeLang(event) {
this.$i18n.setLocale(event.target.value);
}
CodeSandbox here
In the first step, do the following first
// nuxt.config.js, inside nuxt-i18n module
locales: [
{ code: 'ar', iso: 'ar', file: 'ar/app.js', dir: 'rtl' },
{ code: 'en', iso: 'en-US', file: 'en/app.js', dir: 'ltr' },
{ code: 'fr', iso: 'fr-FR', file: 'fr/app.js', dir: 'ltr' },
],
Then create a plugin in the code and enter the following code
// plugins/ltr-rtl.js
export default function({ app }, inject) {
const dir = () => app.i18n.locales.find((x) => x.code === app.i18n.locale)?.dir;
inject( 'dir', dir);
}
And in the last step
<!-- layouts/default.vue -->
<div id="app" :dir="$dir()">
My app here...
</div>
I'm a bit new at Vuejs2 and rxjs. So please be kind ^_^. I have an Observable api endpoint. I want to change the param value "food_type" via a select drop down on the same page. I want it so that when I select an item via the drop down the param value is updated, changing the end point and the data on the page gets reloaded. How can I achieve this?
here is my select drop down….
<div class="col-sm-2 divTableHead hand">
<select name="food_type" id="food_type" class="form-control" v-model="food_type">
<option value="" selected>Feeding</option>
<option value=“A”>One</option>
<option value=“AB”>Two Bee</option>
<option value=“BB”>Bee Bee</option>
<option value=“CB”>Cee Bee</option>
<option value=“CC”>Cee Cee</option>
</select>
</div>
here is what my Observable looks like…
data() {
return {
thisCat: [],
food_type: ''
}
},
subscriptions() {
return {
thisCat: Observable.from(axios.get(`${process.env.KITTY_URL}/api/v1/feedings/?cat__slug&cat__name=${this.$route.params.catName}&food_type=${""}`)
.catch(error => console.log(error)))
.pluck("data","results")
}
},
Thank you -_^
Seems like what you're looking for is a Watcher.
This is most useful when you want to perform asynchronous or expensive
operations in response to changing data.
That's exactly the case!
Check out the example below I prepared for you using the JSONPlaceholder API.
var app = new Vue({
el: '#app',
data: {
postID: '',
loading: false,
postContent: null,
},
watch: {
postID: function () {
this.fetchPost()
}
},
methods: {
fetchPost: function(id) {
this.loading = true;
fetch('https://jsonplaceholder.typicode.com/posts/'+this.postID)
.then(response => response.json())
.then(json => {
this.postContent = {
title: json.title,
body: json.body
}
this.loading = false;
})
},
}
});
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<select v-model="postID">
<option value="" disabled>Select a post</option>
<option value="1">Post #1</option>
<option value="2">Post #2</option>
<option value="3">Post #3</option>
<option value="4">Post #4</option>
<option value="5">Post #5</option>
</select>
<h2 v-if="loading">Loading...</h2>
<div v-if="postContent" class="post_content">
<h3>{{postContent.title}}</h3>
<p>{{postContent.body}}</p>
</div>
</div>
As you can see, the watcher watches for any changes of that property and perform whatever you told it to do. In this case, call the fetchPost method and perform a fetch.
I have a component involving a select element. Below, opts is an array of objects.
Vue.component('atcf-select', {
props: [
'opts',
],
data() {
return {
element_index: '',
};
},
template: `
<div>
<select #change="onChange(opt,index)">
<option v-for="(opt,index) in opts">
{{ opt.text }} {{opt.index}}
</option>
</select>
</div>
`,
methods: {
onChange(opt,index) {
//Do something with opt and index...
}
}
};
The problem is obviously I cannot get the selected opt object and its index, and use it as a parameter for onChange method. What is the correct way to get the selected option's index and object?
You won't be able to pass the opt or index values to the change listener on the select element because it is outside the scope of the v-for.
If you don't specify any parameters for the onChange handler, Vue will implicitly pass an event object. From there, you can get the selectedIndex value via e.target.selectedIndex.
Here's an example:
new Vue({
el: '#app',
data() {
return {
opts: [
{ value: 'a', text: 'A' },
{ value: 'b', text: 'B' },
{ value: 'c', text: 'C' },
]
}
},
methods: {
onChange(e) {
let index = e.target.selectedIndex;
let option = this.opts[index];
console.log(index, option);
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.min.js"></script>
<div id="app">
<select #change="onChange">
<option v-for="(opt, index) in opts" :key="index" :value="opt.value">
{{ opt.text }}
</option>
</select>
</div>
You can use v-model
{{ option.value }} - {{ option.text }}
Index of {{valeureSelectionnee}} is : {{ IndexValeureSelectionnee }}