I'm currently working on incorporating a rating system into my Vue.js project, but I am struggling to successfully pass the rating values

After carefully reviewing the documentation, I implemented the code below. While I am successfully retrieving data for enquiryDesc, I am encountering null values for rating. Despite trying various troubleshooting steps, the issue with null values persists.

My HTML form is as follows:

<form id="enquiryBox" method="POST" onSubmit="return false;" data-parsley-validate="true" v-on:submit="handelSubmit($event);">
  <div class="modal-body brbottom-20">
    <div class="clearfix">
      <div class="col-lg-6">
        <div class="form-group required">
          <fieldset class="rating">
            <input v-model="rating" type="radio" id="rating" name="rating" v-bind:value="5" ><label v-bind:value="5" class = "full" for="star5" title="Awesome"></label>
               <input v-model="rating" type="radio" id="rating" name="rating" v-bind:value="4" ><label v-bind:value="4" class="half" for="star4half" title="Pretty good"></label>
               </fieldset>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="form-group required">
          <label>Enquiry</label>
          <textarea placeholder="Write your enquiry here" rows="7" id="enquiryDesc" name="enquiryDesc" class="form-control required" title="Desc" v-model="enquiryDesc" required="required"></textarea>
        </div>
      </div>
    </div>
  </div>
  <div class="">
    <button id="btn-submit-enquiry" class="btn whiteButton" type="submit">Post Enquiry</button>
  </div>
</form>

The Vue.js script associated with the form is shown below:

enquiryBox = new Vue({
   el: "#enquiryBox",
   data: {
     rating: '',
     enquiryDesc: '',
   },
   methods: {
     handelSubmit: function(e) {
       var vm = this;
       data = {};
       data['rating'] = this.rating;
       data['enquiryDesc'] = this.enquiryDesc;
       console.log(data);

       $.ajax({
         url: 'https://api/post/add_review/',
         data: data,
         type: "POST",
         dataType: 'json',
         success: function(e) {
           if (e.status) {
             alert("Success")

           } else {
             vm.response = e;

             alert(" Failed")
           }
         }
       });
       return false;
     }
   },
 });

When I check the response from console.log(data), it shows:

{rating: '', enquiryDesc: "cghjl,./"}

Despite using v-model and v-bind:value, I still face issues with not getting the values. Could there be an initialization problem causing this? Any assistance or solution would be greatly appreciated, as I have exhausted all available resources without success.

Answer №1

When using inputs in Vue, avoid using the value attribute as it may cause issues. Instead, rely on the v-model value as the source of truth. By setting the default v-model value, each input will be automatically checked.

new Vue({
  el: '#app',
  data () {
    return {
      rating: 3
    }
  },
  methods: {
    send (e) {
      e.preventDefault()
      console.log(this.rating)
    }
  }
})
<div id="app">
  <form action="" method="post" @submit="send">
    <fieldset>
      <input type="radio" name="rating" value="5" v-model="rating">
      <input type="radio" name="rating" value="4" v-model="rating">
      <input type="radio" name="rating" value="3" v-model="rating">
      <input type="radio" name="rating" value="2" v-model="rating">
      <input type="radio" name="rating" value="1" v-model="rating">
    </fieldset>
    <button type="submit">Send</button>
  </form>
</div>

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c1b7b4a481f3eff4eff8">[email protected]</a>/dist/vue.min.js"></script>

Implement these changes in your code - in HTML:

<fieldset class="rating">
  <label class="full" for="star5" title="Awesome">5</label>
  <input v-model="rating" type="radio" id="star5" name="rating" value="5">
  <label class="half" for="star4half" title="Pretty good">4</label>
  <input v-model="rating" type="radio" id="star4half" name="rating" value="4">
</fieldset>

In the JavaScript section:

enquiryBox = new Vue({
  el: "#enquiryBox",
  data: {
    rating: 5,
    enquiryDesc: '',
  },
  methods: {
    handelSubmit: function (e) {
      const vm = this
      const data = {}

      data['rating'] = this.rating
      data['enquiryDesc'] = this.enquiryDesc

      $.ajax({
        url: 'https://api/post/add_review/',
        data: data,
        type: "POST",
        dataType: 'json',
        success: function (e) {
          if (e.status) {
            alert('Success')
          } else {
            vm.response = e
            alert('Failed')
          }
        }
      })

      return false
    }
  }
})

Don't forget to update the first line and try again:

<form id="enquiryBox" method="post" data-parsley-validate="true" @submit="handelSubmit">

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

NodeJS Fork - React each instance a new line is detected from the child process

I am currently working on creating a NodeJS function (on Windows7) that listens to a subprocess and handles each newline sent through the subprocess in Node. The following example demonstrates this: var express = require('express'); var app = ex ...

Attempting to run driver.execute_script(gooogletag but no response was received

I have been attempting to receive responses in the console from the browser when running googletag parameters with Selenium, but unfortunately I have not been successful. Even after trying .execute_async_script('googletag.pubads()') and putting ...

Issue with IE7 Dropdownlist not appearing after changing class name when onFocus event is triggered for the first time

I need to adjust the CSS class of a dropdownlist when it is focused on, in order to change its background color. However, in IE7, when the dropdownlist is clicked, the CSS class changes but the options list does not appear until the dropdownlist is clicke ...

Building a table using a JSON object in a React component

I have been dynamically creating a table in React based on the API response received. data = {"name":"tom", "age":23, "group":null, "phone":xxx} Everything was working fine until I encountered a scenario w ...

The functionality of my script relies on the presence of an alert function within it

My code seems to only work when I include an alert function in it. I'm trying to make my div scroll to the bottom. I've done some research, but for some reason, the script doesn't run without an alert function. $(document).ready(function ...

Incorporate this form created externally onto my website

I have been working on my website and I am looking to incorporate a form that opens up once the login button is clicked. This form was generated using an online form builder which provides an embed code for seamless integration onto websites. Below, you wi ...

Determining the percentage of a bar in d3.js when hovering over it

I am working with a d3 chart and looking to implement a tooltip feature that displays the label of the bar section along with the percentage it represents in relation to the total bar. Initially, I considered calculating the height of the hovered section t ...

There is a button on my website that uses a small piece of Javascript to post a tweet, but unfortunately, it is not functional on mobile devices

Check out this link to view the demonstration - http://codepen.io/illpill/pen/VbeVEq function sendTweet(message, author) { window.open('https://twitter.com/intent/tweet?hashtags=thequotemachine&text=' + encodeURIComponent('"' + m ...

Tips for sending an input file to an input file multiple times

As a developer, I am facing a challenge with a file input on my webpage. The client can add an image using this input, which then creates an img element through the DOM. However, I have only one file input and need to send multiple images to a file.php i ...

Creating a stylish Go URL bar using HTML and CSS

Looking for some guidance in JavaScript as I am new to it. I want to create a go bar similar to the ones found at the top of browsers using HTML and JS. When the button is clicked, it should navigate to the URL entered in the box. Here's an example of ...

Guide on creating custom error messages for cross field validation in vee-validate

Take a look at this guide for more information. In the scenario presented here, I am looking to display the values of min and max in my message. Can you help me with that? https://i.sstatic.net/2mD7f.png ...

What is the interaction between Parse Cloud Code and Parse Server like?

After reviewing Parse's documentation on Cloud Code, I find myself puzzled. They make it clear that Cloud Code is not running in a Node.js environment. What does this mean for the functionality of my server? Even though the server uses Node.js & Exp ...

I intend to use the v-for directive in Vue to create a table

Below is an example of a JavaScript array. mydata:[1,2,3,4,5,6,7,8,9] This is the desired result in table format: 1 2 3 4 5 6 7 8 9 Using vanilla HTML, you can achieve this with a table: <table> <tr> <td>1</td><td>2& ...

What are the solutions for fixing the issue of infinite redirection error in Vue Router?

I encountered an issue while trying to implement a check in router.beforeEach where I wanted to verify if there is a sessionToken stored and redirect to the Login page if it's not available: There seems to be an infinite redirection happening in a nav ...

Design my div layout to resemble a tree shape

Take a look at this URL. I have dynamically created divs in a nested structure for a sports tournament. I need help styling the divs to match the tournament structure. This is how I want my structure to look. The code is functioning properly, it's ju ...

Is it possible to alter the canvas origin when using an Orthographic camera with a CSS3D

When transitioning the camera from perspective to orthographic, I noticed that the camera's position also shifts so that the coordinates 0,0,0 are situated in the top left corner. Is this expected behavior? Check out this Example for reference. Ortho ...

Ways to protect my login details when making an ajax request?

The scenario I am dealing with is as follows: I have developed a website using Javascript where users are required to input a username and password. Subsequently, the site makes an ajax call to the Webserver. On the other end, I have a PHP-powered Webser ...

Building a query in Javascript by utilizing object keys and values: a step-by-step guide

I am looking to transform an object with various keys and values into a query string format, for example: obj1: { abc: "Abc", id: 1, address: "something" }. The challenge is that this object is generated dynamically, so the numbe ...

Is there a way to personalize the header outline of the mui-material datagrid?

Can someone help me modify the appearance of the Mui Datagrid outline to something different than its default setting? I'm having trouble uploading my code. Are there any reference materials or sample code snippets available for this modification? ...

I am attempting to establish a connection with the Converge Pro 2 system from Clearone using NodeJS node-telnet-client, but unfortunately, my efforts to connect have been unsuccessful

My connection settings are as follows: { host: '192.168.10.28', port: 23, shellPrompt: '=>', timeout: 1500, loginPrompt: '/Username[: ]*$/i', passwordPrompt: '/Password: /i', username: 'clearone ...