Question

需要Vuejs的帮助，因为我对此很陌生。

我具有表单选择器，并且取决于所选项目，我应该在表单下方显示所选项目的信息，并将此项目的$ lua5.3 test.lua nil 10 nil 20 nil nil 30 $ lua5.2 test.lua nil 10 nil 20 nil nil 30 $ lua5.1 test.lua nil 10 nil 20 nil nil 30 $ luajit test.lua nil 10 nil 20 nil nil 30发送到我的表单<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, width=device-width" /> <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1533195059" /> <script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script> <script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script> <script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script> <script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script> </head> <body> <div id="map" style="height:550px;width:720px;"></div> <script> //Step 1: initialize communication with the platform var platform = new H.service.Platform({ app_id: 'devportal-demo-20180625', app_code: '9v2BkviRwi9Ot26kp2IysQ', useHTTPS: true }); var pixelRatio = window.devicePixelRatio || 1; var defaultLayers = platform.createDefaultLayers({ tileSize: pixelRatio === 1 ? 256 : 512, ppi: pixelRatio === 1 ? undefined : 320 }); //Step 2: initialize a map - not specificing a location will give a whole world view. var map = new H.Map(document.getElementById('map'), defaultLayers.normal.map, {pixelRatio: pixelRatio}); //Step 3: make the map interactive // MapEvents enables the event system // Behavior implements default interactions for pan/zoom (also on mobile touch environments) var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map)); // Create the default UI components var ui = H.ui.UI.createDefault(map, defaultLayers); function setUpClickListener(map) { map.addEventListener('tap', function (evt) { var coord = map.screenToGeo(evt.currentPointer.viewportX, evt.currentPointer.viewportY); addMarker(coord); }); } function addMarker(coordinates){ var marker = new H.map.Marker({lat:coordinates.lat, lng: coordinates.lng}); map.addObject(marker); var bubble = new H.ui.InfoBubble({lat:coordinates.lat, lng: coordinates.lng}, { content: '<b>Hello World!</b>' }); // show info bubble ui.addBubble(bubble); } setUpClickListener(map); </script> </body> </html>。

视觉理解：

我曾经尝试id做像request 并且我可以轻松显示@ {{post.goal}}，但它会将v-bind:value="post.id"发送到我的请求。请帮助有更多技能的人。

我的选择器：

v-bind:value="post"

还有我的Vue：

{object Object}

干杯，亲爱的！：）

Answer 1

制定方法getPostGoal以获得goal的选定索引

new Vue({
  el:"#app",
  data:{
    posts:[  
      {id:1,title:'test1',goal:'goal1'},
      {id:2,title:'test2',goal:'goal2'},
      {id:3,title:'test3',goal:'goal3'},
    ],
    post:1
  },
  methods:{
    getPostGoal:function(id=null){
      if(id){
        var index = this.posts.map(e=>e.id).indexOf(id);
        return this.posts[index].goal;
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
    <div class="uk-form-controls" id="equity-name">
      <select name="share_id"  v-model="post">
        <option v-for='p in posts' v-bind:value="p.id">{{p.title}}</option>
      </select>

      <div v-if="post">
        selected post:
        {{getPostGoal(post)}}
      </div>
    </div>
  </div>
</div>

另一种解决方法是，设置object as value

new Vue({
  el:"#app",
  data:{
    posts:[  
      {id:1,title:'test1',goal:'goal1'},
      {id:2,title:'test2',goal:'goal2'},
      {id:3,title:'test3',goal:'goal3'},
    ],
    post:{goal:'NA'}
  },
  mounted(){
    if(this.posts.length){
      this.post = this.posts[0];
    }
  },
  methods:{
    getPostGoal:function(id=null){
      if(id){
        var index = this.posts.map(e=>e.id).indexOf(id);
        return this.posts[index].goal;
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
    <div class="uk-form-controls" id="equity-name">
      <select name="share_id"  v-model="post">
        <option v-for='p in posts' v-bind:value="p">{{p.title}}</option>
      </select>

      <div v-if="post">
        selected post:
        {{post.goal}}
      </div>
    </div>
  </div>
</div>

Laravel + Vue如何显示所选项目的值？

1 个答案: