小编Wan*_*rer的帖子

如何在vue js html中添加多个图像和其他输入字段?

我的HTML代码是

我还需要添加阵列格式的sez,我还需要添加多个图像,需要提供添加图像,点击它时需要根据客户需要添加图像

<form method="POST" enctype="multipart/form-data" v-on:submit.prevent="handleSubmit($event);">
  <div class="row">
    <div class="col-md-4">
      <div class="form-group label-floating">
        <label class="control-label">Name</label>
        <input type="text" class="form-control" v-model="name">
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-group label-floating">
        <label class="control-label">Alias</label>
        <input type="text" class="form-control" v-model="alias">
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-group label-floating">
        <label class="control-label">Sex</label>
        <select class="form-control" v-model="sex" id="level">
        <option value="Male">Male</option>
        <option value="female">Female</option>
        </select>
      </div>
    </div>
  </div>
  <div class="row" v-for="(book, index) in sez" :key="index">


    <div class="col-md-4">
      <div class="form-group label-floating">
        <label class="control-label">Date </label>
        <input type="date" class="form-control" v-model="book.date">
      </div>
    </div>
    <div class="col-md-8">
      <div class="form-group label-floating">
        <label …
Run Code Online (Sandbox Code Playgroud)

html javascript jquery vue.js vue-component

24
推荐指数
2
解决办法
2617
查看次数

如何在vue js html中以给定格式多次选择和传递数据?

我需要以给定的格式传递数据.

rules : [{
        name:null,
        section:null,
        data   : [{head:null,value:null}]
    }],
Run Code Online (Sandbox Code Playgroud)

这是我面临的问题.希望有人能帮我解决问题.给出了片段.我需要以上面给出的格式传递数据.如果在rules []中需要另一个数组,那也没关系

数据[]中的head和value需要另一个数组.如果需要,这也可以.希望得到帮助.请帮我解决一下.

请更改选择以阅读问题

    addForm = new Vue({
      el: "#addForm",
      data: {
        rules: [{
          name: null,
          section: null,
          data: [{
            head: null,
            value: null
          }]
        }],

      },
      methods: {
        addNewRules: function() {
          this.rules.push({
            name: null,
            section: null,
            data: [{
              head: null,
              value: null
            }]
          });
        },
      }
    })
Run Code Online (Sandbox Code Playgroud)
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
   

        <div id="addForm">
      
    
    <div class="card-content" v-for="(bok, index) in rules" :key="index">
         <p>This is the first part which is fine for me</p>
            <div …
Run Code Online (Sandbox Code Playgroud)

javascript jquery vue.js vue-router vue-component

11
推荐指数
1
解决办法
1052
查看次数

当我选择第二个输入框时,为什么音译不起作用?

<div class="row" v-for="(book, index) in Subsequent" :key="index">
    <div class="col-md-8">
        <div class="form-group label-floating">
            <label class="control-label"> Details</label>
            <input type="text" class="form-control" v-model="book.seizuredetails" id="transliterateTextarea2">
        </div>
    </div>
</div>
<a @click="addNewRow">Add Another</a>
</div>
Run Code Online (Sandbox Code Playgroud)

我在第一个输入框中得到音译.(第一种情况没问题)

因此,当我在添加另一个时,我能够有一个新的输入框.但是,音译不起作用.

我的音译脚本是

  <script type="text/javascript">

      // Load the Google Transliterate API
      google.load("elements", "1", {
          packages: "transliteration"
      });

      function onLoad() {
          var options = {
              sourceLanguage: google.elements.transliteration.LanguageCode.ENGLISH,
              destinationLanguage: [google.elements.transliteration.LanguageCode.MALAYALAM],
              shortcutKey: 'ctrl+g',
              transliterationEnabled: true
          };

          // Create an instance on TransliterationControl with the required
          // options.
          var control = new google.elements.transliteration.TransliterationControl(options);

          // Enable transliteration in …
Run Code Online (Sandbox Code Playgroud)

html javascript jquery vue.js

10
推荐指数
1
解决办法
213
查看次数

如何使用vue js在前端显示错误信息?

这是我的错误信息:

     {message: "This username is already taken", status: false, error-type: 3, x-debug: [,…]}
Run Code Online (Sandbox Code Playgroud)

我的 vue js 代码是

 <script>
      regBox = new Vue({
el: "#regBox",
  data: {
   username : '',
   phone : '',
   email : '',
   password: '',
   confirm_password : ''
  },
  methods: {
     handelSubmit: function(e) {
           data = {};
           data['username'] = this.username;
           data['email'] = this.email;
           data['phone'] = this.phone;
           data['password'] = this.password;
           data['confirm_password'] = this.confirm_password;
            $.ajax({
              url: 'https://herokuapp.com/api/user/reg/',
              data: data,
              type: "POST",
              dataType: 'json',
              success: function(e) {
              if (e.status)
               alert("Registration Success") …
Run Code Online (Sandbox Code Playgroud)

html javascript vue.js vue-component

6
推荐指数
1
解决办法
2万
查看次数

当我单击“添加行”按钮时,如何动态地将行添加到 html 表单中?

<div class="row">
    <div class="col-md-4">
        <div class="form-group label-floating">
            <label class="control-label">Act</label>
            <input type="text" class="form-control" v-model="act" >
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group label-floating">
            <label class="control-label">Section </label>
            <input type="text" class="form-control" v-model="section">
        </div>
    </div>
    <button>Add row</button>
</div>
Run Code Online (Sandbox Code Playgroud)

因此,当我单击添加按钮时,我需要继续添加上面的行。当我单击“添加行”按钮时,如何添加此行。

我需要将值传递为 BOOKED UNDER :

[{
    act :,
    section:,
}]
Run Code Online (Sandbox Code Playgroud)

如果我有更多行,我需要以逗号分隔的方式传递值。我的js比较弱,这是我第一个遇到这种问题的项目。我怎样才能以这种方式增加价值。

我的 vue.js 代码是

addForm = new Vue({
    el: "#addForm",
    data: {
        bookedUnder:[],
        act: '',
        section:'',
    },
    methods: {
        handleSubmit: function(e) {
            var vm = this;
            data['otherNatureofOffense'] = //in the abve way
            $.ajax({
                url: 'http://localhost:3000/record/add/f/',
                data: data, …
Run Code Online (Sandbox Code Playgroud)

html javascript jquery vue.js vue-component

4
推荐指数
1
解决办法
2万
查看次数

标签 统计

javascript ×5

vue.js ×5

html ×4

jquery ×4

vue-component ×4

vue-router ×1