Here is a basic setup for what I would like to do:
HTML Side
test.html
<div id="app">
<my-comp temp="1" cat="{ name:'Geoff', age:3 }"></my-comp>
</div>
Vue Side
app.js:
import myComp from './components/myComp.vue'
app = new Vue({
el: "#app",
components: {
myComp
}
});
myComp.vue
<template>
<div v-html='template'>
</div>
</template>
<script>
export default {
props: [
'temp',
'cat'
],
data () {
temp1: `<input name="name" value="cat.name">
<input name="age" value="cat.age">`,
// other template
// ...
},
computed: {
template() {
return this.temp == 1 ? this.temp1 : this.temp2;
}
}
}
</script>
My problem is when I open the html file in the browser, I get:
cat.name
cat.age
appearing in the input. Technically, my form isn't responsive to existing data. How can I solve this?
In your test.html you have to change this:
<my-comp :temp="1" :cat="{ name:'Geoff', age:3 }"></my-comp>
The double dots have to added otherwise it will be interpreted as an string and not as an object.
With value you are on the right track. The only you have to change is this because you want to insert a variable into your 'string'
data() {
return {
temp1: `<input name="name" value="${this.cat.name}">
<input name="age" value="${this.cat.age}">`
}
}
Don't forget to add 'input type' as well.
Related
Good day everyone, I'm trying to format the value that JSON brings me in currency, I saw some suggestions but I still can't convert the value.
This is how I've my code structured
<template>
...
<div class="currency-selection">
<input type="text" :value="conversionValue * cryptoQuantity " readonly />
...
<template>
<script>
export default {
name: 'CurrencySelect',
data: () => ({
conversionValue: 0,
cryptoQuantity: 1
}),
axios
.get(
"https://min-api.cryptocompare.com/data/price?fsym=btc&tsyms=COP"
)
.then((res) => {
this.conversionValue = res.data.COP;
})
.catch((e) => {
console.log(e);
});
}
Right now the value is 169057977.17 but I want it to be displayed like this: 169.057.977,17
You can use toLocaleString to format numbers acording to the language and region you define.
Use Number.toLocaleString('es-CO') get this: 169.057.977,17
See this for a list of supported locales
See this example
<script>
export default {
data() {
return {
conversionValue: 0,
cryptoQuantity: 1
}
},
async mounted () {
this.conversionValue = await fetch("https://min-api.cryptocompare.com/data/price?fsym=btc&tsyms=COP").then(raw => raw.json()).then(json => json.COP)
}
}
</script>
<template>
<input type="text" :value="(this.cryptoQuantity * this.conversionValue).toLocaleString('es-CO')"/>
</template>
In my vue.js application, I am trying to render the html content dynamically in child component's slot. If I enter the text only then there is no issue, it works with fine.
Here is my code:
ChildComponent.vue
<template>
<div :class="type" class="message" v-if="type">
<slot />
</div>
</template>
<script>
export default {
...
props: ['type'],
...
}
</script>
ParentComponent.vue
<script>
import Alert from '#/Alert';
export default {
components: {
Alert,
},
data() {
return {
...
alert: {
error: '',
message: '',
}
};
},
created () {
this._onLoad()
},
methods: {
_onLoad() {
axios.get(`api.call.here`).then((res) => {
...
}).catch(error => {
this.alert.error = error.type;
this.alert.message = `<p>message here</p>`; // from response
});
},
}
}
</script>
Here is the screenshot of the issue:
What you trying to do can be achieved with v-html. You can use it while calling your ChildComponent.vue. This is a small example for your case:
<Alert>
<span v-html="alert.message"></span>
</Alert>
I would like to interpolate a string in VueJS which contains variables and html. Is there any option in Vue?
component.vue
<template>
<div v-html="test1"></div>
</template>
<script>
export default {
name: 'component',
data() {
return {
test: "test interpolation",
test1: " <p> some text {{ test }} </p>",
};
},
}
</script>
String in test1 variable is loaded from a Json file after an Http request
export default {
data () {
return {
rawHtml: "<h1> This is some HTML </h1>",
}
},
render(){
return(
<div>
<div domPropsInnerHTML={this.rawHtml}> </div>
</div>
)
}
}
domPropsInnerHTML attribute performs the same task as v-html , it sets the content of the div to rawHtml.
Ref for more
More Example
I have a vue app and a component. The app simply takes input and changes a name displayed below, and when someone changes the name, the previous name is saved in an array. I have a custom component to display the different list items. However, the component list items do not render immediately. Instead, the component otems render as soon as I type a letter into the input. What gives? Why would this not render the list items immediately?
(function(){
var app = new Vue({
el: '#app',
components: ['name-list-item'],
data: {
input: '',
person: undefined,
previousNames: ['Ian Smith', 'Adam Smith', 'Felicia Jones']
},
computed: {
politePerson: function(){
if(!this.person) {
return 'Input name here';
}
return "Hello! To The Venerable " + this.person +", Esq."
}
},
methods: {
saveInput: function(event){
event.preventDefault();
if(this.person && this.previousNames.indexOf(this.person) === -1) {
this.previousNames.push(this.person);
}
this.setPerson(this.input);
this.clearInput();
},
returnKey: function(key) {
return (key + 1) + ". ";
},
clearInput: function() {
this.input = '';
},
setPerson: function(person) {
this.person = person;
}
}
});
Vue.component('name-list-item', {
props: ['theKey', 'theValue'],
template: '<span>{{theKey}} {{theValue}}</span>'
});
})()
And here is my HTML.
<div id="app">
<div class="panel-one">
<span>Enter your name:</span>
<form v-on:submit="saveInput">
<input v-model="input"/>
<button #click="saveInput">Save</button>
</form>
<h1>{{politePerson}}</h1>
</div>
<div class="panel-two">
<h3>Previous Names</h3>
<div>
<div v-for="person, key in previousNames" #click='setPerson(person)'><name-list-item v-bind:the-key="key" v-bind:the-value="person" /></div>
</div>
</div>
</div>
You are not defining your component until after you have instantiated your Vue, so it doesn't apply the component until the first update.
Suppose I had this code
<main>
<form>
<input type="text" v-model="name">
<button type="submit" #click="submit">
Submit From Vue Property
</button>
</form>
</main>
And this the Vue code.
new Vue({
el : 'main',
data : {
name : ''
},
methods : {
submit(){
}
}
})
how to submit to server from Vue data property instead? That i used in submit method.
( honestly, my actual code is much complicated but the problem is same. How to submit Vue data property instead? )
If you are looking for an ajax based solution, consider using a library called 'axios'. It lets you post/get data using urls much like jquery's get and post methods.
To use axios you need to first install axios using npm, npm install axios --save, import it using import axios from axios and use this in submit. The new code will look like below:
<main>
<form #submit.prevent="submit">
<input type="text" v-model="name">
<button type="submit">
Submit From Vue Property
</button>
</form>
</main>
new Vue({
el : 'main',
data : {
name : ''
},
methods : {
submit(){
axios.post('/your-url', {name: this.name})
.then(res => {
// do something with res
})
.catch(err => {// catch error});
}
}
})
Here you can submit total formdata using vue variables.you can make api's using axios.
<template>
<div>
<form #submit.prevent="submitform">
<input type="text" v-model="formdata.firstname">
<input type="text" v-model="formdata.lastname">
<input type="text" v-model="formdata.email">
<input type="text" v-model="formdata.password">
<button type="submit">
Submitform
</button>
</form>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'el',
data () {
return {
formdata:{ firstname: '', lastname: '', email: '', password: '' }
// this is formdata object to store form values
}
},
methods: {
submitform(){
axios.post('/url', { this.formdata })
.then(res => {
// response
})
.catch(err => {
// error
})
},
mounted () {
},
components: {
}
}
</script>