Question

这里我有一个@click事件

    $fields = array(
        'app_id' => $oneSignalID,
        'included_segments' => [ 'All' ],
        "headings" => [ "en" => "test heading" ],
        'contents' => [ "en" => 'test content' ],
        "collapse_id"=> "ff".(string)microtime(true),
        "android_group"=> "ff".(string)microtime(true),
        "url" => "http://www.example.com"
    );

    $ch = curl_init();
    curl_setopt( $ch, CURLOPT_URL, "https://onesignal.com/api/v1/notifications" );
    curl_setopt( $ch, CURLOPT_HTTPHEADER, array(
        'Content-Type: application/json; charset=utf-8',
        'Authorization: Basic '.$onesignalkey
    ) );
    curl_setopt( $ch, CURLOPT_RETURNTRANSFER, true );
    curl_setopt( $ch, CURLOPT_HEADER, false );
    curl_setopt( $ch, CURLOPT_POST, true );
    curl_setopt( $ch, CURLOPT_POSTFIELDS, json_encode( $fields ) );
    curl_setopt( $ch, CURLOPT_SSL_VERIFYPEER, false );

    $response = curl_exec( $ch );
    curl_close( $ch );

单击任何结果时，将此结果添加到输入中。有什么想法吗？

<h2 @click="action(customer.id)">{{ customer.name }}</h2>

如何将搜索结果中的单击结果附加到输入中？

js在这里更新：

<input class="search" type="text" name="search" v-model="search"  placeholder="Search posts..."
       @focus="magic_flag = true">
<div v-if="magic_flag">
  <div class="post" v-for="customer in filteredCustomer">
    <h2 @click="action(customer.id)">{{ customer.name }}</h2>
  </div>
</div>

我将显示此处更新的其余内容：

methods: {
            action(item) {
                this.selected = item
                this.search = item.name
                this.magic_flag=false;
            }
        },

Answer 1

您可以将customer.id对象作为参数传递给action，而不是将customer传递给action方法。您可以执行以下操作。

var vm = new Vue({
    el: '#app',
    data: {
      search: "",
      filteredCustomer:[{name:'test1',id:1},{name:'test2',id:2},{name:'test3',id:3}]
   },
   methods: {
      action (customer) {
       this.search=customer.name
       this.filteredCustomer=this.filteredCustomer.filter(o=> o.id!=customer.id)
      }
   }
    
});

h2{cursor:pointer}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js" type="text/javascript"></script>

<div id="app">				

  
  <input class="search" type="text" name="search" v-model="search"  placeholder="Search posts..."
      >
<div >
  <div class="post" v-for="customer in filteredCustomer">
    <h2 href @click="action(customer)">{{ customer.name }}</h2>
  </div>
</div>
</div>

将搜索结果附加到输入搜索字段vue中

1 个答案: