Access the data from a JSON object within a v-select menu

<v-form :model='management'>
 <v-flex xs3 sm2 md3>
  <div class="form-group>
   <v-select
    :items="days"
    item-text='text'
    item-value='text'
    placeholder="MM"
    single-line
    attach
    v-model="week.day"
    >
   </v-select>
  </div>
   <input type="text" id="day" name="day" v-model="week.day['text']"  >
 </v-flex>
 <v-btn @click.prevent='submitManagement'> Save</v-btn>
</v-form>

<script>
  export default {
    data() {
      return {
        days: [
          {text: '01'},
          {text: '02'},
          {text: '03'},
          {text: '04'},
          {text: '05'},
          {text: '06'},
          {text: '07'}
        ],
        week: {
          day: ''   
        }
    }
 }
</script>

I am encountering an issue where the selected value from the dropdown for the days is not appearing in the input field. I am having trouble identifying the cause of this problem. Can someone assist me in figuring out what might be wrong with my code?

Answer №1

When using v-model for the input, remember to utilize week.day instead of week.day['text']

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

JavaScript for varying content that is dynamically loaded on a completely ajax-powered website

This post has been updated to address the issue more effectively with a refined concept and code (based on the responses provided so far) I am working on developing an ajax-driven website, but I have encountered some issues with multiple bound events. He ...

At what point does Math.random() begin to cycle through its values?

After running this simple test in nodejs overnight, I found that Math.random() did not repeat. While I understand that the values will eventually repeat at some point, is there a predictable timeframe for when it's likely to happen? let v = {}; for ( ...

Make the most of your Bootstrap 3 layout by utilizing a full page container that fills both the width and height between a fixed header and

I am currently working on a basic bootstrap page with the Example template from Bootstrap's website. I want the content in the middle to take up the space between the header and footer, while ensuring that both the header and footer remain visible at ...

AngularJS - Issue with Scope not being properly utilized in view when calling controller function

I'm attempting to update a variable within $scope in a controller function, and while the assignment is successful, it doesn't reflect in the view. app.controller('LoginCtrl', ['$scope', '$http', function ($scope, $ ...

Exploring Objects using the for-in loop in ReactJS

This code is written in Reactjs. I am attempting to iterate through and print object data, but I keep encountering an error --> TypeError: Cannot read properties of undefined (reading 'state'). Could someone please help me identify what I am d ...

What is the specific table element compatible with Polymer3?

I stumbled upon iron-data-table (), but it relies on bower which is used in Polymer2. However, I am working with npm in Polymer3. Is there a suitable table element or an alternative solution compatible with Polymer3? ...

Exclusively utilize optgroup multiple functionality within bootstrap-select

I'm currently utilizing https://github.com/snapappointments/bootstrap-select/ version 1.13.18 and I am in need of a solution where only optgroup options can have multiple selections. This means that if a non-optgroup option is selected, all other opti ...

React's createRef() versus callback refs: Which one provides the ultimate edge in performance?

Lately, I've delved into React and grasped the concept of refs for accessing DOM nodes. The React documentation discusses two methods of creating Refs. Could you elaborate on when a callback ref is preferable to createRef()? Personally, I find createR ...

I designed a dropdown menu with a searchable <mat-select> feature, where selecting an item is automatic when a space bar is pressed in the search box

Description : I have implemented a dropdown list using element that contains a list of items along with a search field. This allows users to easily search for specific items in the list instead of manually scrolling through a long dropdown menu. They can ...

ControlsContainer - jQuery object for Flexslider

I recently tried to implement a flexslider with controls in a separate div using the controlsContainer option provided by flexslider. The setup consists of a left column containing the slider code (".flexslider-small"), a right column with text, and the c ...

What could be causing my .vue component to be undefined?

I've encountered an issue while using parcel-plugin-vue to compile a basic .vue component from a file. The compilation process seems to be running smoothly with no errors, but when I try to view the page in my browser, it appears blank without any con ...

Display a tooltip when the user hovers over the column name of a BootstrapVue table

I am currently working with a bootstrap-vue table that has the following structure; Below is the code for setting up the table; <template> <div> <b-table striped hover :items="items" :fields="fields"></b-tabl ...

"Utilizing an if-else statement within a forEach loop

I have an array of ages and I want to determine the age range for each age along with the count, then push it into my object. The issue I am facing is that if there are multiple ages in the same range, it gets pushed twice. I only want to push it once and ...

Having trouble connecting to JSTL in my JavaScript file

Currently, I am facing an issue with my JSTL code that is housed within a JavaScript file being included in my JSP page. The problem arises when I place the JSTL code inside a script within the JSP page - it works perfectly fine. However, if I move the s ...

Using Next-auth.js: Redirecting from getServerSideProps to a specific callback URL - How can it be done?

Hey, I've been working on implementing authentication with the NextAuth library in my Next.js application. While following the documentation, I encountered a situation that wasn't covered. I'm attempting to create a 'route guard' o ...

I encountered an issue in ReactJS where I received a TypeError stating that props.history.listen is not a function

Why is this showing up? I'm using ReactJS and can't figure out what's going wrong. Here is my history.js: import { createBrowserHistory } from 'history' export default createBrowserHistory In my App.js: import React from 'r ...

Ways to send a POST variable to PHP without refreshing the webpage

Is there a way to pass a simple variable from a text-box on a different page to PHP without reloading it? I've been informed that Ajax is required for this task, but I'm unsure of how to go about implementing it. Can someone provide me with a sam ...

exit out of React Dialog using a button

I have a scenario where I want to automatically open a dialog when the screen is visited, so I set the default state to true. To close the dialog, I created a custom button that, when clicked, should change the state to false. However, the dialog does no ...

Having difficulty managing asynchronous Node JS API requests

I'm a beginner in Node.js and I've taken on a project that involves querying both the Factual API and Google Maps API. As I put together code from various sources, it's starting to get messy with callbacks. Currently, I'm facing an issu ...

Choose an element based on its position in the index (multiple elements with the same class)

Can you use Javascript or jQuery to select an element by its index? For example: <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> If I have 4 elements with ...