How to Pass JSON data inside HTML attributes - html

Question

I have created a form using HTML and trying to pass the value of a JSON object in the HTML attribute. I have used fetch to get the data from the api and used it to create options in my page that is made using vueJS. The problem is, the value that gets logged in the database is {{item}} instead of the value in the item.
How to resolve this issue?
AddLog.vue code:
<template>
<h1 style="margin-top: 107px; text-align: center;color: ;">Log the values into the tracker</h1>
<form #submit.prevent="submit" style="margin-right: 522px;margin-top: 29px; margin-left: 519px" method="POST">
<div class="form-group">
<label for="exampleInputEmail1" required style="color: ;">Note</label>
<input type="name" class="form-control" v-model="data.note" id="exampleInputEmail1" aria-describedby="emailHelp" name="Note" placeholder="Note" style="border-radius: 20px;">
</div>
<div class="form-group" v-if="this.trackertype==='Numerical'" >
<label for="exampleInputPassword1" required style="color: ;">Enter the Value</label>
<input type="value" class="form-control" v-model="data.value" id="exampleInputPassword1" name="value" placeholder="Value" style="border-radius: 20px;" required>
</div>
<div class="multiple-choice" v-else>
<label for="value" style="color: ;">Check the value</label>
<div class="form-check">
<div v-for="item,index in this.trackersettings" :key="index">
<input type="radio" name="value" v-model="data.value" value="{{item}}" required>
<label>{{item}}</label>
</div>
</div>
</div>
<button type="submit" class="btn btn-outline-dark" style="border-radius: 15px;">submit</button>
</form>
</template>
<script>
import { reactive } from 'vue';
import axios from 'axios';
export default {
Name: 'AddLog',
data(){
return{
uid : this.$route.params.uid,
tid : this.$route.params.tid,
items : [],
trackertype: '',
trackersettings: []
}
},
mounted() {
localStorage.setItem('uid',this.uid)
localStorage.setItem('tid',this.tid)
axios.get('http://localhost:5000/addLog/'+this.uid+'/'+this.tid)
.then((resp ) => {
this.items = resp.data
this.trackertype = this.items[0]['data']['trackertype']
this.trackersettings =this.items[1]['tracker_settings']
console.log(this.trackertype,this.trackersettings)
})
.catch((err) => {
console.log(err.resp)
})
},
setup() {
const data = reactive({
note: '',
value: ''
})
const submit = async () => {
await fetch("http://localhost:5000/addLog/"+localStorage['uid']+'/'+localStorage['tid'],{
method: 'POST',
headers: {'Content-Type' : 'application/json','Access-Control-Allow-Origin': '*'},
body: JSON.stringify(data)
}).then(resp => resp.json())
.then(data => {console.log(data);})
.catch(error => { console.log(error)
})
}
return {
data,
submit,
}
}
}
</script>
<style>
</style>
API code:
#app.route('/addLog/<int:uid>/<int:tid>', methods=['GET', 'POST'])
def log(uid,tid):
cell = tracker.query.filter_by(u_id=uid,tracker_id=tid).first()
l = cell.tracker_settings.split(',')
d = {
'userid' : cell.u_id,
'trackerid' : cell.tracker_id,
'trackername' : cell.tracker_name,
'trackerdesc' : cell.tracker_description,
'trackertype' : cell.tracker_type,
'tracker_settings' : cell.tracker_settings,
'datecreated' : cell.date_created
}
if request.method=='POST':
data = request.json
val = data['value']
note = data['note']
cell = logtable(user_id=uid,t_id=tid,Note=note,value=val)
db.session.add(cell)
db.session.commit()
return jsonify({'message':'success'})
else:
return jsonify({'data':d},{'tracker_settings' : l })
I want the values in the options to be logged in the db.
Instead of the "{{item}}" in the value , I need the string "Gloomy". Can Anybody help me on doing this?

Answer 1

Here is the correct way to assign the value :
Try :value="item" instead of value="{{item}}"
Demo :
var app = new Vue({
el: '#app',
data: {
selected: '',
item1: 'Male',
item2: 'Female'
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h2>Binding Radio</h2>
<input type="radio" id="one" :value="item1" v-model="selected">
<label for="one">Male</label>
<br>
<input type="radio" id="two" :value="item2" v-model="selected">
<label for="two">Female</label>
<br>
<span>Picked: {{ selected }}</span>
</div>