您正在为所有按钮使用相同的data属性，因此这些按钮共享相同的loading状态，这会同时影响，为了有所区别，请尝试添加名为index的data属性，该属性表示当前单击的按钮索引：

data () {
      return {
        index:-1,
        loader: null,
        loading: false
      }
    },

以及将加载 prop 绑定到条件loading && i==index并在点击事件@click="loader = 'loading';index=i"时更新当前索引：

<div v-for="(item, i) in items" :key='i'>

<v-btn 
dark 
color="pink"
:loading="loading && i==index"
@click="loader = 'loading';index=i"
>
  <v-icon>location_on</v-icon> Lookup
  <span slot="loader">locating...</span>
  <span slot="loader" class="custom-loader">
      <v-icon dark>cached</v-icon>
  </span>
</v-btn>

</div>

它实际上比你想象的要容易得多：

<div v-for="(item, i) in items" :key='i'>
<v-btn 
dark 
color="pink"
:loading="loading[index]"
@click="loading[index] = true"
>
  <v-icon>location_on</v-icon> Lookup
  <span slot="loader">locating...</span>
  <span slot="loader" class="custom-loader">
      <v-icon dark>cached</v-icon>
  </span>
</v-btn>

</div>

data () {
      return {
        loading: {},
      }
    },

一开始loading[index]是未定义的，所以它会被评估为false，一旦你在click事件中建立了它的值，它会被评估为true，它对我很有效，希望它能有所帮助。

你可以使用React数组来防止像这样改变索引。

<div v-for="(item, i) in items" :key='i'>
<v-btn @click.prevent="testload(i)" :loading="loading[i]"></v-btn>
</div>

data () {
  return {
    loading: [],
  }
},
methods: {
    testload: function (index) {
        // reactive array
        this.$set(this.loading, index, true);
        console.log(index)
        console.log(this.loading[index])
        // stop loading after x miliseconds
        setTimeout(() => (this.$set(this.loading, index, false)), 3000)
    },

别忘了根据项目的长度输入false，示例如下：

getDataAll: function () {
                var i = 0
                for (i = 0; i < items.length; i++) {
                    this.loading.push(false);
                }
             }