Vue.js not accepting an object as input value

I am working with an input type text in my vue js application.

This is the initial code snippet:

<input type="text" v-model="answer[index]" >

Here is the updated code:

<table>
    <tr v-for="(question_overall, index) in questions">
        <td>
            {{ question_overall.question }}
            <div>
                <input type="text" :value="{id: question_overall.id , answer:  ??}" v-model="answer[index]" >
            </div>
            {{ answer[index] }}
        </td>
    </tr>
</table>

data: function () {
     return {
        questions: [],
        answer:{
            id: null,
            answer: null,
        },
     }
},

I am trying to echo out the v-model like this:

{{ answer[index] }}

The desired output should be:

{ "id": 1, "answer": "the value of this answer is from what I type in" }

Can someone help me solve this issue? Thank you!

Answer №1

Make sure to thoroughly review the vue.js documentation

Instructions for utilizing v-model:

<input type="text" v-model="text.answer" />

Sample script:

export default {
  data: () => ({
    text: {
       id: 1,
       text: ''
    }
  })
}

Alternate method for using v-model

Script snippet:

export default {
  data: () => ({
    text: {
       id: 1,
       text: ''
    }
  }),
  methods: {
    value_changing(event) {
     this.text = event.target.value
    }
  }
}

If you prefer a v-model with a for loop, refer to this example here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

WebStorm raises an error saying "SyntaxError: Plugin '@typescript-eslint' failed to load as declared in '.eslintrc.cjs' » '@vue/eslint-config-typescript'."

Encountering an issue in WebStorm where every ts file in the project displays the error message: SyntaxError: Failed to load plugin '@typescript-eslint' declared in '.eslintrc.cjs » @vue/eslint-config-typescript': Unexpected token &a ...

Modifying the image height in a column using Bootstrap and JSON data

My webpage is dynamically generating images from a JSON file through a JavaScript file. However, the images are displaying at different heights, and I want each column to adjust to the height of the image to eliminate any gaps. Particularly, data with the ...

How to transform an array of full dates into an array of months using React

I am attempting to convert an array of dates to an array of months in a React project import React, {useEffect, useState} from 'react'; import {Line} from 'react-chartjs-2'; import moment from "moment"; const LinkChart = () = ...

Using Partials in Node.js with Express and Hogan.js

I am currently in the process of building a website using Node.js + Express and utilizing Hogan.js as the view engine. Here is a snippet from my file app.js: // Dependencies var express = require('express') , routes = require('./routes&a ...

What is the best way to invoke a Javascript function within the same file using PHP?

I am facing an issue with my PHP file named "PhpCallJavascript". I am attempting to call the function CreateSVG() from within the PHP code. However, it seems that it is not working. Do I need to incorporate AJAX here? Or perhaps there is another solutio ...

storing a value in the browser's local storage

I am in the process of creating a new game that includes a high score feature. The idea is that when the current score surpasses the existing one stored locally, it will be replaced: localStorage.setItem('highScore', highScore); var HighScore = ...

What is the best way to create a nullable object field in typescript?

Below is a function that is currently working fine: export const optionsFunc: Function = (token: string) => { const options = { headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}`, } ...

Excessive calls to the component update in React with Javascript are leading to application crashes

componentDidUpdate() { // Retrieving trades from the database and syncing with MobX store axios.get(`http://localhost:8091/trade`) .then(res => { this.props.store.arr = res.data; }) } After implementing this code, my ...

Enhance User Experience by Updating Status on Checkbox Selection in PHP

I am working with a datatable and I have created a table using datatables. How can I change the status field when a checkbox is clicked? The default status is 'before', but when the checkbox is clicked, it should update to 'after' in th ...

What steps should I take to ensure that elements beneath a div are made visible?

I've been working on a unique project to create a website with "hidden text" elements. One of the cool features I've developed is a circular div that follows my mouse cursor and flips all text below it using background-filter in both CSS and Jav ...

Tips for determining whether a value is present in an array or not

I'm trying to prevent duplicate values from being pushed into the selectedOwners array. In the code snippet below, the user selects an owner, and if that owner already exists in the selectedOwners array, I do not want to push it again. How can I imple ...

Stable header that jumps to the top when scrolled

I have implemented the JavaScript code below to set the header to a fixed position when it reaches the top of the page so that it remains visible while the user scrolls. Everything appears to be functional, but the header movement is abrupt and not smooth. ...

Developing a dynamic input field module in Vue.js

I am currently working on a reusable component for input fields that allows me to define them easily within one component tag using props. My goal is to make the component versatile enough to be used as text, date, password, number, etc., based on a condit ...

Validation of a multi-step form ensures that each step is filled out

I'm completely new to Angular and I'm attempting to implement validation in my form. The form structure was not created by me and is as follows: <div> <div ng-switch="step"> <div ng-switch-when="1"> < ...

Notify immediately if there is any clicking activity detected within a designated div container

I am looking to trigger an alert when a specific div is clicked. Here is the scenario: <div class="container"> <div class="header"> <h1>Headline<h1> </div> <div class="productbox"></div> </div> I have succ ...

Guiding PHP on displaying specific comments under an article using AJAX

Currently, I'm in the process of constructing a news section for my website. However, I've hit a roadblock when it comes to displaying the appropriate comments using ajax... commentsLoad.php <?php include('config.php'); $newsid = ...

Ways to boost an array index in JavaScript

I recently developed a JavaScript function that involves defining an array and then appending the values of that array to an HTML table. However, I am facing an issue with increasing the array index dynamically. <script src="https://cdnjs.cloudflare. ...

I am trying to extract a specific section of a Google Maps element using Selenium, but it does not seem to be visible

I am trying to locate this specific div using Selenium: <div jstcache="829" class="section-editorial-quote section-editorial-divider" jsan="t-6URMd4sqjIY,7.section-editorial-quote,7.section-editorial-divider,t-1Oo3GrRI6AU"> <span jstcache="827"&g ...

Step-by-step guide to implementing dynamic field autocomplete using AJAX techniques

Seeking assistance in merging ajax autocomplete with dynamic field input. The autocomplete feature is currently working on the first field, but when adding another field, the autocomplete stops functioning. Any help would be greatly appreciated. Here is t ...

The TS2583 error in TypeScript occurs when it cannot locate the name 'Set' within the code

Just started my Typescript journey today and encountered 11 errors when running tsc app.ts. Decided to tackle them one by one, starting with the first. I tried updating tsconfig.json but it seems like the issue lies within node_modules directory. Any help ...