如何解决Vue 3 中的可拖动不会显示值
我正在使用 public Footlockerv1(String base,String keywords,String size,Billing.ProfileObject profile,ArrayList<ProxyObjects.ProxyObject> proxyRandom) {
super();
ProxyObjects.ProxyObject object = null;
for (ProxyObjects.ProxyObject b : proxyRandom) {
Random randomGenerator = new Random();
int index = randomGenerator.nextInt(proxyRandom.size());
System.out.println("Random Proxies: " + proxyRandom.get(index));
b = proxyRandom.get(index);
object = new ProxyObjects.ProxyObject(b.getAddress(),b.getPort(),b.getUsername(),b.getpassword());
}
System.out.println("Full Proxy name: " + object +
"\nConstructed Proxy Name "
+ "Addres: " + object.getAddress() + ". "
+ "Port: " + object.getPort() + ". "
+ "Username: " + object.getUsername() + ". "
+ "Password: " + object.getpassword());
final Gson gson = new GsonBuilder()
.setLenient()
.create();
final HttpLoggingInterceptor interceptorv2 = new HttpLoggingInterceptor();
interceptorv2.setLevel(HttpLoggingInterceptor.Level.BODY);
InetSocketAddress proxyAddr = new InetSocketAddress(object.getAddress(),object.getPort());
java.net.Proxy proxyy = new java.net.Proxy(Proxy.Type.HTTP,proxyAddr);
System.out.println("\n Used proxy: " + proxyy);
ProxyObjects.ProxyObject finalObject;
finalObject = object;
System.out.println("Final object: " + finalObject);
Authenticator proxyAuthenticatorr = (route,response) -> {
String credentialTest = Credentials.basic(finalObject.getUsername(),finalObject.getpassword());
System.out.println("Credentials Info: " + credentialTest + " . Info are: " + finalObject.getUsername() + " " +
" & " + finalObject.getpassword());
System.setProperty("https.proxyUser",finalObject.getUsername());
System.setProperty("https.proxyPassword",finalObject.getpassword());
System.setProperty("jdk.https.auth.tunneling.disabledSchemes","");
return response.request().newBuilder()
.header("Proxy-Authorization",credentialTest)
.build();
};
client = new OkHttpClient.Builder()
.proxy(proxyy)
.proxyAuthenticator(proxyAuthenticatorr)
// .authenticator(proxyAuthenticatorr)
.connectTimeout(60,TimeUnit.MILLISECONDS)
.writeTimeout(60,TimeUnit.MILLISECONDS)
.readTimeout(60,TimeUnit.MILLISECONDS)
.cookieJar(new SessionCookieJar())
.addInterceptor(chain ->
{
Request request = chain.request();
Request.Builder newRequest = request.newBuilder()
.header("Accept","*/*")
.method("GET",null)
.header("DNT",String.valueOf(1))
.header("Accept-Language","en-US,en;q=0.9")
.header("User-Agent",RandomUserAgent.getRandomUserAgent()
);
System.out.println("Request: " + request);
return chain.proceed(newRequest.build());
}).addInterceptor(interceptorv2)
.build();
final Retrofit retrofit = new Retrofit.Builder()
.addConverterFactory(GsonConverterFactory.create(gson))
.baseUrl(base)
.client(client)
.build();
api = retrofit.create(API_Retrofit.class);
this.proxy = proxyRandom;
this.base = base;
this.keywords = keywords;
this.size = size;
this.profile = profile;
debug = true;
}
通过拖放对我的 Vue draggable 中的项目进行排序（我在这里简化了我的示例，仅使用 Store.js 作为我的商店数据）。
我还使用了可从 ['a','b','c']
setup() <draggable v-model="myList" item-key="id" @start="drag=true" @end="drag=false" >
<template #item="{card}">
<p>{{ card }}</p>
</template>
</draggable>
我知道模板会遍历 import draggable from 'vuedraggable';
export default {
name: "Dashboard",components: {
draggable
},setup() {
const cards = computed(() => {
return ['a','c']
})
return {
cards
}
}
}
，但没有显示任何值或无法访问。
解决方法
在 Vue 3 中 - 执行 setup 时，尚未创建组件实例。因此，您将无法访问 data、computed、methods 组件选项。
参考： https://v3.vuejs.org/guide/composition-api-setup.html#accessing-component-properties
同样在 Draggable 组件中，数组项将通过 element 变量访问。
更新模板代码：
<draggable v-model="myList" item-key="id" @start="drag=true" @end="drag=false" >
<template #item="{element}">
<p>{{ element.value }}</p>
</template>
</draggable>
尝试更改组件代码如下，
import draggable from 'vuedraggable';
export default {
name: "Dashboard",components: {
draggable
},data:function(){
return {
drag:false
}
},computed:{
myList:function(){
return [{id:1,value:'Card A'},{id:2,value:'Card B'}];
}
}
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
