The problem that the data of the el-autocomplete drop-down box must have the key name of value can actually be named at will.

if the background interface has been set with a key name such as data instead of value, then the selected content will not be displayed in the input box after it is selected
maybe many people"s idea is to change the backend interface, but if this interface has been used by many people, it may not be realistic to change the key name
in fact, the solution is very simple: the code is as follows

     <el-autocomplete
        v-model="markWord"
        :fetch-suggestions="querySearchAsync"
        placeholder=""
        @select="handleSelect"
        :trigger-on-focus="false"
      >
        <template slot-scope="{ item }">
          <div class="name">{{ item.warn }}</div>
          <div class="name" style="color:green">{{ item.value=item.term }}</div>
        </template>
      </el-autocomplete>
   
Apr.05,2021

Map the fetched data when

querySearchAsync,
data.content = data.content.map (obj = > {

)
return {
  ...obj,
  value: obj.term
}

})
put the processed data back


value-key attribute. It took me a long time to find this thing

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e39113-4451f.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e39113-4451f.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?