Pass the value of v-model from one component to the template

I've recently started working with Vue.js and I encountered an issue where I needed to pass a value to the v-model of a template in my main.js file. Here is the template:

Inside main.js

Vue.component("app-input", {
  template: ` 
   <b-row class="my-1 key">
      <b-col sm="5" class="text_aln_rht">
        <label>{{labelName}}</label>
     </b-col>
     <b-col sm="7">
      <b-form-input 
        size="sm"
        v-model="val"
      ></b-form-input>
    </b-col>
  </b-row>
    `,
 props: {
   labelName: String,
   val: String
 },
  methods: {
 }
});

This piece of code is from the component

example.vue

<app-input id="MF" name="TYPE_U32" labelName="test" val="Text"></app-input>

Thank you!

Answer №1

To properly connect your prop value, follow the example below

<app-input id="MF" name="TYPE_U32" :labelName="example" :val="Text"></app-input>

If your prop value is just a string (not a variable), use a single quote

<app-input id="MF" name="TYPE_U32" :labelName="'example'" :val="'Text'"></app-input>

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

vuex: The decision between using $store.commit and directly calling the function

Recently, I discovered an interesting technique where store mutation functions can be passed into HTML events. Here's an example: //In the template <input name="the_field" :value="the_field" @input="updateField"/> // In the component methods ...

Ag-Grid 20.1.0 and Vuetify - Resolving the Vertical Scrolling Problem

I recently updated my application to use Vuetify + Ag-grid version 20.1.0, but I encountered an issue where the vertical scroll bar for ag-grid disappeared and was replaced by a global one. Here are examples of the same layout with different versions of a ...

The information transmitted from the Laravel controller is not syncing with the Vue variable as expected

I've been working on a web app with a dashboard using Laravel and Vue. While passing data from the controller to the Vue file, the data is received correctly. However, when I try to set it to a Vue variable, the value does not update in the variable. ...

Using an AngularJS directive to modify CSS styles

I'm attempting to modify DOM CSS styles using Angular. If the textbox value is set as the height, I have assigned ng-model to the textbox and then ng-style="{height:heightdef}" How can I achieve this using a directive? Fiddle :: http://jsfiddle.n ...

What is the best way to redirect to a specific page when logging out of a website?

To begin, let me outline the situation at hand. We have two distinct websites - website-A and website-B. Each of these websites is hosted on separate domains. A user has the ability to log in to website-B's homepage through the login page of webs ...

The array filtering functionality is not functioning as intended

Struggling with correctly filtering data in JavaScript. Here's an example where var1 = 20, var2 = 10, var3 = 30, var4 = 40. This is the code snippet: var variables = ['var1', 'var2', 'var3', 'var4'], values = [ ...

Transferring JSON Data into JavaScript Variables

I've been struggling to identify what's causing the issue with the code below. It seems that the values from values.json are not being loaded into the variable statesau correctly. When I use document.write(JSON.stringify(statesau)), I just get an ...

Troubleshooting issues with filtering two MongoDB arrays in ES6 and finding a solution

I have a scenario where I am requesting two arrays of objectIDs from MongoDB, and then attempting to identify the differences between the two arrays. In addition, I am passing these arrays through express middleware using res.locals. Below is the code sn ...

Troubleshooting: Images not displaying on webpage due to Ajax, JQuery, and JavaScript integration

I'm currently working on building a dynamic photo gallery using Ajax and JQuery in Javascript. I have set up a directory named "images" in Visual Studio Code and it contains my selection of 5 images. However, when I click the "next" and "previous" but ...

Issues with AngularJS functionality – $route.reload() not functioning as expected

I'm attempting to refresh the page using $route.reload(): var App = angular.module("App", ["ngRoute"]); var idx = 0; App.controller("List", function ($scope, $route) { $scope.changeWallet = function (index) { idx = index; $r ...

Switch out external CSS stylesheets automatically using toggle scripting

Hello there! I've been trying to figure out a way for this script to switch back to the original CSS external stylesheet. Here is the code that I currently have: $(document).ready(function() { $("#css-master2").click(function() { $("link[title=chang ...

Tips on showcasing the elements within a div container using flexbox

Seeking advice on positioning items/cards using flexbox in my initial react app. The issue lies with the div within my card component where applying display: flex; turns every card into a block (column-like) structure, flexing only the content within each ...

Dropped down list failing to display JSON data

I created a website where users can easily update their wifi passwords. The important information is stored in the file data/data.json, which includes details like room number, AP name, and password. [ {"Room": "room 1", "AP nam ...

Does the html label prevent propagation from occurring?

Can anyone explain why the toggle function is not being executed when clicking inside the box with the black border, but works when clicking outside of it (although not on the checkbox)? var checks = document.querySelectorAll("ul li"); for (var i = 0 ...

What are some ways to keep the text within the boundaries of the input box?

How can I prevent the letters from extending beyond the bar when typing a lot of characters? Your assistance in resolving this issue is greatly appreciated. <div id="tasks-container"> <div id="tasks-header"> ...

Dynamic Element with Mousewheel Event

Simply put, I am attempting to attach a 'mousewheel' event to a div that contains a scrollbar. My code functions properly when used outside of the plugin I developed, but as soon as I convert it into a plugin, it stops working. I tested changing ...

Using Express Validator is very easy and efficient once you understand its

Looking for a validator to catch errors and log them to the console Check out the code snippet below: const expressValidator = require('express-validator'); const { check, validationResult } = require('express-validator/check'); const ...

Transforming an array into a JSON object

I currently have an array structured like this: [ 'quality', 'print-quality: 4', 'x-dimension', 'Value: 21590', 'Value: y-dimension', 'Value: 27940', 'Value: ', 'Valu ...

Creating tests for Vue components that mock the $route object

When testing a component that includes a statement like this.$route.fullPath, how can I mock the value of fullPath for the $route object in order to properly test the component? ...

Step-by-step guide for dynamically including dropdown options

Is there a way to dynamically add a dropdown using JavaScript? I currently have a dropdown with numbers that creates another dropdown when selected. However, I want to add the dynamic dropdown through JavaScript. How can I achieve this? Below is the PHP ...