Below is my code in vue.js where I trying to display the out put in list type like. if user give out put in the form of comma separated.
vue.js,angular,react.js
Then I want the out put in this format
vue.js
angular
react.js
This I have implemented in JavaScript but trying to achieve in vue.js please help me to complete this
This is the updated code please tell me where I am going wrong
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue#2/dist/vue.js"></script>
</head>
<body>
<div id="demo">
<span v-for="(string, index) in lists">
<span>{{string}}</span><span v-if="index+1 < lists.length">, </span>
</span>
</div>
<script>
var demo = new Vue({
el: '#demo',
data: function() {
return {
string: ''
};
},
computed: {
lists: function(){
return this.string.split(",");
}
}
})
</script>
</body>
</html>
You could use a computed property for this in combination with split:
var demo = new Vue({
el: '#demo',
data: function() {
return {
string: ''
};
},
computed: {
lists: function(){
return this.string.split(",");
}
}
})
Related
I use a Form object to handle all my input fields and validation/errors etc.
new Vue({
el: '#root',
data: {
form: { trainer: '' }
}
And I can use it as v-model like this:
<input v-model='form.trainer' name='trainer'>
I would like to make the form an instance property, because I have to pass it to all my components at the moment.
Vue.prototype.$form = {trainer: ''}
new Vue({ el: '#root' });
However, its not reactive anymore:
<input v-model="$form.trainer">
<span v-text="$form.trainer"></span>
Changes to the input are not reflected on the span.
Is there a solution to use a instance property as v-model?
Using Global Mixin:
You can use Global Mixin and then add form: { trainer: '' } to it and then this option will be available in every Vue instance created afterwards like:
// inject a handler for `myOption` custom option
Vue.mixin({
data: function () {
return {
form: { trainer: '' }
}
}
})
and then you can use it like normal component data option:
<input v-model="form.trainer">
<span v-text="form.trainer"></span>
Demo:
// inject a handler for `myOption` custom option
Vue.mixin({
data: function() {
return {
form: { trainer: '' }
}
}
})
// Define a new component called trainer
Vue.component('trainer', {
template: `<div>
<input v-model="form.trainer">
<span v-text="form.trainer"></span>
</div>
`
})
new Vue({
el: "#myApp",
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<div id="myApp">
<trainer></trainer>
<trainer></trainer>
</div>
Demo #2:
var trainer2Data = {
form: { trainer: '' }
}
Vue.mixin({
data: function() {
return trainer2Data;
}
})
// Define a new component called trainer2
Vue.component('trainer2', {
template: `<div>
<input v-model="form.trainer">
<span v-text="form.trainer"></span>
</div>
`
})
new Vue({
el: "#myApp",
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<div id="myApp">
<trainer2></trainer2>
<trainer2></trainer2>
</div>
I get some text from API then I display it. But before I display it, I need to inject or replace some variable in the text to value from variable.
Please check this out to understand what I mean:
https://jsfiddle.net/0q4ot5sw/
new Vue({
el: "#app",
data: {
text: 'Some very long text from API where I need to inject %variable%',
variable: 'some word' // How to inject this variable to the text?
}
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
{{ text }}
</div>
You can do that
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
{{ text.replace("%variable%", variable) }}
</div>
or that
new Vue({
el: "#app",
data: {
text: 'Some very long text from API where I need to inject %variable%',
variable: 'some word' // How to inject this variable to the text?
},
computed: {
resultText: function() {
return this.text.replace("%variable%", this.variable);
}
}
})
and use like this
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
{{ resultText }}
</div>
You can use computed value to do the task
new Vue({
el: '#app',
data: {
text: 'Some very long text from API where I need to inject',
variable: 'some word123' // How to inject this variable to the text?
},
computed : {
changeText : function() {
return this.text + this.variable
}
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<p>{{ changeText }}</p>
</div>
You can create a function (or a computed property, this decision is actually yours) and combine those two strings. Something like this
new Vue({
el: "#app",
data: {
text: 'Some very long text from API where I need to inject',
variable: 'some word'
},
methods: {
getText: function(){
return this.text + this.variable;
},
toggle: function(todo){
todo.done = !todo.done
}
}
})
On your template, you just call the function you created
<div id="app">
{{ getText() }}
</div>
How can I make the following code work with Vue.js?
Google
where company is google.
data: {
company: "google"
}
const app = new Vue({
el: '#app',
data() {
return {
company: 'google'
};
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.1/vue.js"></script>
<div id="app">
<a :href="`http://${company}.com`">Google</a>
</div>
This is what I'm trying to accomplish:
{{ span('Hello') }}
And what desired output should be is:
<span>
Hello
</span>
Is this possible?
Thanks
Look at the below snippet -
Note - You can't render html inside {{ }} because it get added to text node of the element. To render it as an html you need to use v-html and have your function which return element wrapping your text
new Vue({
el: "#app",
data: {
foo: 'asdasd'
},
methods: {
span(text) {
return `<span> ${text} </span>`
}
}
})
span {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h1>
Render whatever you want
</h1>
<div v-html="span('Hello world')" />
</div>
<span>{{Hello}}</span>
If you need dynamic HTML tag
<tag :is="tag">{{Hello}}</tag>
Vue.component('tag', {
props:{
is:{type:String, required:true}
},
render(h){
return h(this.tag, this.$slots.default)
}
})
new Vue({
el:'#vue',
data(){
return {
tag:'h1'
}
}
})
For Vue3 it is v-html="htmlContent"
I have got Vue-JS app. After use click variable rasters_previews_list get new data. I would like to generate list with them. I can't understand which directive I should use to handle this even.
Here is my code:
var userContent = Vue.extend({
template: `
<div class="LayersMenuSectionContent" v-if="rasters_previews_list.length">
<ul v-for="img in rasters_previews_list">
<li>{{img.id}}</li> // generate list here
<ul>
</div>
`,
data: function () {
return {
rasters_previews_list: [] // when come new data I should generate li with then
}
},
ready: function()
{
},
methods:
{
}
});
Should I use v-on or v-if?
When rasters_previews_list is changed, list is autorendered in v-for.
new Vue({
el: '#app',
template: `
<div class="LayersMenuSectionContent" v-show="rasters_previews_list.length">
<ul v-for="img in rasters_previews_list">
<li>{{img.id}}</li>
<ul>
</div>
<button #click="add">Add</button>
`,
data: function () {
return {
rasters_previews_list: [] // when come new data I should generate li with then
}
},
ready: function(){ },
methods: {
add(){
this.rasters_previews_list.push({id: 'hello'},{id: 'world'});
}
}
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<div id="app"></div>
Extra: You must use v-show instead of v-if for this case